时间戳

首页 > 解决方案 > 将缩放的圆圈附加到多线图

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

问题描述

我已经按照这里的示例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");

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

标签： javascriptd3.jssvggraph

解决方案

您实际上需要两个圈子的选择，一个 foropen另一个 for 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

推荐阅读