d3.js - 在d3中画一条水平线。以下代码显示了基于 x n y 像素值绘制的线

Question

此代码在 y 的正确值而不是 x 值处绘制一条线，x 值需要是先前绘制的折线图上的一个点。基本上我想在折线图中从一个点到另一个点画一条线。

我想检索绘制为折线图的“d.close”的 x 坐标。该线必须从y轴到“d.close”的点值

var st=line[v];
var x=v+1;
var end=line[x];
var mean_value = meanArr[v];

svg.append("line")

   .attr("class", "mean-line")

  .attr({ x1: st, y1: y(mean_value), x2: end, y2: y(mean_value) });

svg.append("text")

    .attr({ x: end + 5, y: y(mean_value) + 4})

    .text(mean_value+" mean");

v =0line[v] = 对应于 https://leanpub.com/D3-Tips-and-Tricks/read 中的“d.close”的值
meanArr[] 包含计算值

Answer 1

您提供的链接指向整本书，所以我假设您正在使用 Basic Line Graph代码。它包括基于 x 和 y 比例的 x 和 y 轴:

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

d3 尺度是您对数据调用的函数，这意味着 x(date)会给你一个像素值，你可以用它作为水平位置和y(number)将为您提供一个可用作垂直位置的像素值。

数据是一个形式的对象数组

{date:"1-May-12",close:"58.13"}

折线图本身是用 d3.svg.line() 绘制的路径数据生成器。生成器将整个数据点数组作为输入，并以可用于 SVG <path> 的形式返回连接它们的线的描述。元素的“d”属性。生成器知道如何将数据转换为屏幕上的位置，因为您使用了它的.x()。和 .y()指定数据访问器函数的方法:

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

这告诉它，对于每个点(数据数组中的对象)，该点的水平像素位置应该通过抓取 date 来创建。数据对象的属性，并将其传递给 x尺度函数。同样，垂直像素位置来自通过 close y 的属性(property)尺度函数。

这很重要:<path>元素和任何其他 SVG 元素对您的数据、关闭值或日期一无所知。他们只使用像素值。这就是绘制 <line> 时必须使用的东西元素。

如何在数据值和像素值之间进行转换？您使用 x 和 y 缩放函数。

如果你有两个数据点:

var d1 = {date:"30-Apr-12",close:"53.98"};
var d2 = {date:"26-Apr-12",close:"89.70"};

然后你会在它们之间画一条线

svg.append("line")
   .attr({ x1: x(d1.date), y1: y(d1.close), //start of the line
           x2: x(d2.date), y2: y(d2.close)  //end of the line
         });

您从 x 和 y 数据值(日期和结束)开始，将它们传递给刻度，然后获得用于定位线的 x 和 y 像素值。

如果我正确理解您的代码，那么您永远不会有 x(日期)数据值，并且您永远不会将任何内容传递给 x 刻度:

var st=line[v];
var x=v+1;
var end=line[x];
var mean_value = meanArr[v];

svg.append("line")
   .attr("class", "mean-line")
  .attr({ x1: st, y1: y(mean_value), 
          x2: end, y2: y(mean_value) 
       });

您正在使用 st和 end作为线的开始和结束水平像素值。但这些值是您的 line 中的两个连续值数组，你说的等于d.close数据的值。但是d.close是您的 y 数据值。您需要数据点的日期值，并且需要将该日期传递给 x 刻度以获取像素值。

我不知道您如何或为什么创建 line数组与原始数据数组分开，但如果您想从索引 v 处的数据点绘制一条线到索引 v+1 处的数据点您需要从原始数据数组中获取日期值:

svg.append("line")
   .attr("class", "mean-line")
   .attr({ x1: x( data[v].date ), y1: y(mean_value), 
           x2: x( data[v+1].date ), y2: y(mean_value) 
       });