Как вызвать d3.svg.line () самостоятельно?

Question

lineFunction соответствует в этом примере d3.svg.line().Позже, однако, lineFunction заполняется как функция параметром lineData, а именно списком точек с координатами x и y.Как я могу обойти lineFunction и включить набор данных непосредственно в d3.svg.line()?

Мой подход заключается в прямом вызове d3.svg.line(lineData):

//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.svg.line(lineData)
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate('linear'))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

Но это не делает никакихсмысл, пока это не функция, которая принимает параметры.Я также изучил кодовую базу D3 и обнаружил, что функция строки принимает входные данные:

export default function() {
  var x = pointX,
  // ...
  function line(data) {
    // ...
  }
  // ...
  return line;
}

Вот пример выполнения Димитар Данаилов :

var width = 400;
var height = 400;

var svg = d3.select('body').append('svg');
svg.attr('width', width);
svg.attr('height', height);

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('linear');

//The data for our line
var lineData = [ 
  { "x": 1,   "y": 5},  
  { "x": 20,  "y": 20},
  { "x": 40,  "y": 10}, 
  { "x": 60,  "y": 40},
  { "x": 80,  "y": 5},  
  { "x": 100, "y": 60}
];
  
//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", lineFunction(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

svg {
  font-family: "Helvetica Neue", Helvetica;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

<script src="//d3js.org/d3.v3.min.js"></script>

Источник: https://bl.ocks.org/dimitardanailov/6f0a451d4457b9fa7bf6e0dddcd0f468

Дополнительные примеры: https://www.dashingd3js.com/svg-paths-and-d3js

Answer 1

Что вы можете сделать, это позвонить d3.svg.line() после того, как вы его настроите, например:

var lineGraph = svg.append("path")
  .attr("d", d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate('linear')(lineData))

Итак, пересмотренный фрагмент выглядит так:

var width = 400;
var height = 400;

var svg = d3.select('body').append('svg');
svg.attr('width', width);
svg.attr('height', height);


//The data for our line
var lineData = [ 
  { "x": 1,   "y": 5},  
  { "x": 20,  "y": 20},
  { "x": 40,  "y": 10}, 
  { "x": 60,  "y": 40},
  { "x": 80,  "y": 5},  
  { "x": 100, "y": 60}
];
  
//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('linear')(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

svg {
  font-family: "Helvetica Neue", Helvetica;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

<script src="//d3js.org/d3.v3.min.js"></script>

Редактировать: Обратите внимание, что в вопросе и ответе используется d3.svg.line() из d3 v3. Для более высоких версий вы можете использовать d3.line() и опустить interpolate, как указано ниже @ uzay95.