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

Question

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

我正在尝试向图表线上的每个点添加圆圈，但到目前为止尚未成功。

当我做类似的事情时:

.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 轴是时间刻度，因此您可以使用 .attr('cx', function(d){ return x(d.date) })< 设置 cx/。您可以将 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