d3中数据驱动的垂直/水平线 [英] Data-driven vertical/horizontal lines in d3

问题描述

我正在尝试在d3图表上绘制一系列垂直线.用于此的数据源是x位置(数据中)的列表，该列表通过x()比例函数进行映射以提供正确的位置.

I am attempting to draw a series of vertical lines on a d3 chart. The data source for this is a list of x positions (in the data) which is mapped through the x() scale function to give the correct position.

目前，对于labels变量中的每个条目，这都实现为for循环. y的原点和终点来自数据minY和maxY.文本标签粘贴在该行的末尾.

At present this is implemented as a for loop for each entry in the labels variable. The y origin and endpoint are taken from the data minY and maxY. A text label is attached to the end of the line.

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传入，然后在其上进行迭代以绘制一系列平行的垂直线.

How would I re-write this in a data-driven way i.e. passing the labels in as a .data then iterating over this to draw a series of parallel vertical lines.

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

我难以理解的地方是x()和y()函数. x()当然应该返回该线的x位置(对于给定的线是恒定的)，但是y函数应如何返回/如何在两个定义的点之间绘制一条线(minY和maxY)

The bit I'm having trouble getting my head around is the x() and y() functions. x() should of course return the x position of the line (which is constant for a given line), but how/what should the y function return to draw a line between two defined points (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)

我觉得我缺少明显的东西.

I feel like I'm missing something obvious.

推荐答案

我最终使用rect区域而不是阴影区域，而不是线条.但是，回到这一点，我意识到绘制一系列矩形与一系列直线的代码几乎相同.混乱源于用于生成path的d3函数.line().但是，您可以使用svg:line并通过生成器函数(此处包装在字典中)传递数据来创建一系列直线:

I ended up using rect regions instead as shaded areas in preference to lines. However, returning to this I realised that the code is almost the same for drawing a series of rectangles vs. a series of straight lines. The confusion was arising from the d3 function .line() which is used to generate a path. However you can create a series of straight lines by using svg:line and passing data via a generator function (here wrapped in a dictionary):

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中数据驱动的垂直/水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！