将点 (x,y) 添加到具有时间刻度 x 轴的 d3 多线图

Question

我目前正在尝试构建一个 x 轴为 d3.time.scale() 的多线图。

我正在尝试将圆圈添加到图表线条上的每个点，但到目前为止一直没有成功。

当我做类似的事情时：

.attr('cx', function(d){ return x(d.price) })

我得到一个负数。

我正在考虑设置另一个 scale (pointsScale) 来处理这个问题，但基本上没有成功。

我做错了什么？

代码请参考我的JSBin

Answer 1

您运行遇到了一些问题：

由于您将 x 轴设为时间刻度，我猜您实际上希望将价格作为 y 变量，而将日期作为 x 变量。这就是 x(d.price) 为负的原因 - d3 试图将价格解释为日期，这最终没有多大意义。因此，将上面的代码行替换为：.attr('cy', function(d){ return y(d.price) })
为了让圆圈真正可见，需要设置三个参数：cx、cy 和 r。由于d3已经知道你的x轴是时间刻度，所以你可以设置cx和.attr('cx', function(d){ return x(d.date) })。你可以让 r 成为你想要的圆的任何半径。只需选择一个，否则它将默认为 0，您将无法看到圆圈。例如，.attr('r', 4) 会将半径设置为完全可见的值 4。
你先画圈再画线。结果，线条被画在圆圈上，看起来有点奇怪。因此，如果您想避免这种情况，请将圆代码移至行代码之后。

综上所述，创建您的圈子的代码大致应该是这样的，并且应该在您声明 var paths:

之后

    var circles = company.selectAll('circle')
      .data(function(d){ return d.values; })
      .enter().append('circle')
      .attr('cy', function(d){
        return y(d.price);}) //Price is the y variable, not the x
      .attr('cx', function(d){
        return x(d.date);}) //You also need an x variable
      .attr('r',4); //And a radius - otherwise your circles have
                    //radius 0 and you can't see them!

已更新 jsbin： http://jsbin.com/gorukojoxu/edit?html,console,output

将点 (x,y) 添加到具有时间刻度 x 轴的 d3 多线图

Add points (x,y) to a d3 multi-line graph with time scale x-axis

javascript

linechart

d3.js