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

Question

我遵循了这里的示例 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");

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

Answer 1

您实际上需要两个圆圈的选择，一个用于打开，另一个用于关闭:

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