d3 中数据驱动的垂直/水平线答案

【问题标题】：Data-driven vertical/horizontal lines in d3d3 中数据驱动的垂直/水平线
【发布时间】：2013-09-16 10:25:20
【问题描述】：

我正在尝试在 d3 图表上绘制一系列垂直线。数据源是一个 x 位置列表（在数据中），它通过x() 比例函数映射以给出正确的位置。

目前，这被实现为for 循环，用于labels 变量中的每个条目。 y 起点和终点取自数据minY 和maxY。文本标签附加到行尾。

labels = [
 {
  'x':50,
  'label':test'
 }

 var label = svg.append("g")
        .attr("class","ilabel")

// Labels         
for (var i = 0; i < labels.length; i++) {
    labl = labels[i];

    label.append('line')
        .attr('x1', x( labl.x ) )
        .attr('y1', y( maxY ) )
        .attr('x2', x( labl.x ) 
        .attr('y2', y( minY ) )
        .attr("class","ilabel-line");

    label.append("text")
        .attr("transform", "translate(" +  x( labl.x )+"," + y( maxY )+ ") rotate(-60)")
            .style("text-anchor", "start")
            .attr("dx", ".5em")              
            .attr("class","ilabel-label")

      .text(labl.label);

}

我将如何以数据驱动的方式重新编写它，即将标签作为.data 传递，然后迭代它以绘制一系列平行的垂直线。

var label = svg.selectAll(".ilabel")
      .data(labels)
    .enter().append("g")
      .attr("class","ilabel")

我难以理解的是x() 和y() 函数。 x() 当然应该返回线的 x 位置（对于给定的线来说它是恒定的），但是 y 函数应该如何/返回什么来在两个定义的点之间画一条线（minY & maxY）。

line = d3.svg.line()
  .x(function(d) { return x(d.x); })
  .y(function(d) { return y(d.y); });

label.append('path')
  .attr("d", line)

我觉得我错过了一些明显的东西。

【问题讨论】：

标签： d3.js data-driven

【解决方案1】：

您可以只使用 d3 中的轴函数。看看Bl.ocks 上的这个示例，您可以使用tickValues 轻松设置刻度，然后使用innerTickSize 和outerTicksize 设置刻度的长度。您还需要设置方向。

【讨论】：

我没有选择使用轴刻度（据我所见），这也会改变轴上刻度刻度上的位置。但是感谢您的建议，使我找到了解决方案！

【解决方案2】：

我最终使用rect 区域代替线条作为阴影区域。然而，回到这一点，我意识到绘制一系列矩形和一系列直线的代码几乎相同。混淆是由 d3 函数.line() 引起的，该函数用于生成path。但是，您可以使用svg:line 并通过生成器函数（此处包含在字典中）传递数据来创建一系列直线：

var line = {
    'x1':(function(d) { return x( labl.x ); }),
    'y1':(function(d) { return y( maxY ); }),
    'x2':(function(d) { return x( labl.x ); }),
    'y2':(function(d) { return y( minY) }),
    }


var label = svg.selectAll(".labels")
      .data(labels)
      .enter();

    label.append("svg:line")
            .attr("x1", line.x1)
            .attr("y1", line.y1)
            .attr("x2", line.x2)
            .attr("y2", line.y2)
        .attr("class","label-line");

【讨论】：