Question

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

目前，这是针对for变量中每个条目的labels循环实现的。 y origin和endpoint取自数据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＆amp; 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)

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

Answer 1

您可以在d3中使用轴功能。看一下Bl.ocks上的这个例子，您可以使用tickValues轻松设置滴答，然后使用innerTickSize和outerTicksize设置滴答的长度。您还需要设置方向。

Answer 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");

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

2 个答案: