在d3中绘制一条水平线.以下代码显示基于xny像素值绘制的线条

Question

此代码在y的正确值处绘制一条线,但不是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 = 0 line [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数据对象的属性并将其传递给xscale函数来创建该点的水平像素位置.同样,垂直像素位置来自将close属性传递给y缩放函数.

这很重要:<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) 
       });