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属性并将其传递给{{}来创建该点的水平像素位置。 1}}缩放功能。同样，垂直像素位置来自将x属性传递给close比例函数。

这很重要：y元素和任何其他SVG元素对您的数据，关闭值或日期一无所知。它们仅使用像素值。这是绘制<path>元素时必须使用的内容。

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

如果您有两个数据点：

<line>

然后你可以通过

在它们之间画一条线

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

从x和y数据值（日期和关闭）开始，将它们传递给比例，然后获得用于定位线的x和y像素值。

但是，如果我正确理解您的代码，您永远不会拥有x（日期）数据值，并且您永远不会将任何内容传递给x比例：

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
         });

您使用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是您的y数据值。您需要数据点的日期值，并且需要将该日期传递到x刻度以获取像素值。

我不知道你是如何或为什么创建与原始数据数组分开的d.close数组，但是如果你想从索引line的数据点绘制一条线到数据指向索引v，您需要从原始数据数组中获取日期值：

v+1

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

1 个答案: