javascript - 将缩放的圆附加到多线图

我从这里https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f跟随一个示例创建了一个相似的图形。但是，我需要使用另一列数据来创建与直线颜色匹配的圆，其中半径将是该列条目的某个缩放值。因此，第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");

在该点的正下方，我们添加了路径（在链接中添加了值线路径之后），但是，显然，这仅输入了一条直线的圆。我必须为它们都添加它们。

最佳答案

实际上，您需要两个选择，一个用于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

关于javascript - 将缩放的圆附加到多线图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58036299/