Question

我正在制作交互式折线图，无法从复杂的数据结构中捕获数据

我传递了一个“路径”数组，并且有效：

 path = [[{x:int,y:int},{x:int,y:int},{x:int,y:int}],
        [{x:int,y:int},{x:int,y:int},{x:int,y:int}],
        [{x:int,y:int},{x:int,y:int},{x:int,y:int}]]

但这是我正在使用的数据结构：

data:[{
      id: 0, 
      image:[int values], 
      path:[{x:int,y:int},{x:int,y:int},{x:int,y:int}], 
      pixel:[int values]
      },
      id: 1, 
      image:[int values], 
      path:[{x:int,y:int},{x:int,y:int},{x:int,y:int}], 
      pixel:[int values]
      }]

然后用标准的valueline函数制作折线图：

var valueline = d3.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); })
    .curve(d3.curveMonotoneX);

 chart.selectAll(".line-group")
    .data(path)
    .enter()
    .append("g")
    .attr("class", "line-group")
    .append("path")
    .attr("d", valueline)

我想将整个数据数组传递给d3js，并且函数“ valueline”从数据数组中每个图像的“路径”键捕获x和y。

有什么想法吗？谢谢！

Answer 1

 chart.selectAll(".line-group")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "line-group")
    .append("path")
    .attr("d", d => valueline(d.path))

Answer 2

我最终使用了rioV8解决方案。我还从https://amber.rbind.io/blog/2017/05/02/d3nest/找到了另一种解决方法：

chart.selectAll(".line-group")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "line-group")
    .selectAll(".lineChart")
    .data(function(d) { return [d.path] })
    .enter()
    .append("path")
    .attr("class", "lineChart")
    .attr("d",valueline)

在d3js中使用复杂的数据结构

2 个答案: