D3.js：上下文+焦点放大多个图形

Question

我正在研究Mike Bostock关于焦点+上下文缩放的以下示例。 https://bl.ocks.org/mbostock/1667367。

我想知道我们是否可以使用主图链接多个图表。类似于附加图像的东西。我对d3.js很安静，所以我可能错过了一些东西，但我找不到任何关于如何去做的链接。所有图表都有相同的数据点。

谢谢！

Answer 1

这显然取决于您的数据的组织方式。我想你有一个data数组如下：

[ {date : ...  /*x-coordinate*/
   price1 : .../*first y-coordinate*/
   price2 : .../*second y-coordinate*/  
               /* ...and as many as you like*/
  },
  {date : ...
   price1 : ...
   price2 : ... } 
]

您还有一个数组，其中包含您要作为y轴获取的字段的名称：

fields = ["price1", "price2", ...]

首先要做的是提取每条独立曲线的数据。这可以按如下方式完成：

function singleCurveData(fieldId) {
   return data.map(function (d) { 
      return {date: d.date, price: d[fieldId]};
    });
}

如果您的数据组织方式不同，则只需要更改此功能。基本上，它接收您想要绘制的图形的id，并以标准方式输出该特定图形的数据。

现在到绘图部分。您需要与要显示的不同字段一样多的focus部分，每个字段包含一个area;以及包含许多context s。

的单个area2部分

var focus = svg.selectAll(".focus")
  .data(fields) //associate one field id to each focus block
  .enter()
  .append("g")
  .attr("class", "focus")
  .attr("transform", function(d,i) {return "translate(" + margin.left + "," + (margin.top - i*focusHeight) + ")"});
    //the above line takes care of the positioning, you need to know the target height of a focus block.

var context= ...//as before

现在我们继续绘制曲线：

focus.append("path") //append one path per focus element
  .datum(function(fieldId) {return singleCurveData(fieldId)}) //only this line changes
  .attr("class", "area")
  .attr("d", area);


context.selectAll("path")
  .data(fields) // add a "path" for each field
  .enter()     
  .append("path") //here the datum for the path is the field Id
  .datum(function(fieldId) {return singleCurveData(fieldId)})
                  //now the datum is the path data for the corresponding field
  .attr("class", "area")
  .attr("d", area2); 

这应该就是它的全部。祝你好运！