1

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

目前，这被实现为变量for中每个条目的循环。labelsy 原点和端点取自数据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()andy()函数。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)

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

4

2 回答 2

3

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

于 2013-09-16T11:44:09.127 回答
0

我最终使用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");
于 2013-09-18T22:29:51.207 回答