将缩放的圆圈附加到多线图答案

【问题标题】：Appending scaled circles to a multi-line graph将缩放的圆圈附加到多线图
【发布时间】：2020-01-21 23:32:13
【问题描述】：

我已经按照https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f 的示例创建了一个类似的图表。但是，我需要使用另外一列数据来创建与直线颜色相匹配的圆，其中半径将是该列条目的某个缩放值。所以，col 3 的值有 873、15、1000、1563 等。我尝试过类似

svg.selectAll('circle').data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d.date) })
    .attr("cy", function(d) { return y(d.close) })
    .attr("r", '5')
    .attr("fill", "red");

在我们添加路径的点下方（在链接中添加值线路径之后），但是，显然这只会为一行输入圆圈。我必须为两者添加它们。

【问题讨论】：

标签： javascript d3.js svg graph

【解决方案1】：

您实际上需要两个圈子的选择，一个用于open，另一个用于close：

svg.selectAll(null).data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d.date) })
    .attr("cy", function(d) { return y(d.close) })
    .attr("r", '5')
    .attr("fill", "steelblue");

svg.selectAll(null).data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return x(d.date) })
    .attr("cy", function(d) { return y(d.open) })
    .attr("r", '5')
    .attr("fill", "red");

这是生成的代码：https://bl.ocks.org/GerardoFurtado/4179c63daf38d85a266fb11f8e8e4c17/3786e4a0594e45e6e9a41df84bae4c6a43a86c6f

【讨论】：