D3 - 具有负值的路径

Question

我正在尝试在 D3 中制作一个图表（看起来像下面的屏幕截图），其中三角形在值为正时指向上方，在值为负时指向下方。

我正在使用自定义 'd' 属性创建三角形。我能够制作绿色（正）三角形，但似乎无法弄清楚如何使红色三角形正确指向下方。

我已经能够使用此方法使其作为矩形工作：http://jsfiddle.net/pYZn8/16/，但不能作为路径。在负路径上找不到太多。

有什么建议吗？我在下面附上了 fiddle。谢谢！

var margin = {top: 50, right: 40, bottom: 60, left: 10},
      containerWidth = $('.research-section4-graph').width();  

  var width = containerWidth - margin.left - margin.right,
      height = 700 - margin.top - margin.bottom;

  var data = [
    {sector : 1, val : 53},
    {sector : 1, val : -40},
    {sector : 2, val : 19},
    {sector : 2, val : -39},
    {sector : 3, val : 45},
    {sector : 3, val : -23},
    {sector : 4, val : 45},
    {sector : 4, val : -26},
    {sector : 5, val : 54},
    {sector : 5, val : -40},
    {sector : 6, val : 25},
    {sector : 6, val : -34},
  ];

  data.forEach( function(d) { 
    d.val = +d.val; 
  });

  var allSectors = d3.set( data.map( function(d) { return d.sector; } ) ).values();

  var yScale = d3.scale
                 .linear()
                 .domain( [d3.min(data, function(d) { return d.val; }), d3.max(data, function(d) { return d.val; })] )
                 .range( [height, 0] );

  var xScale = d3.scale
                 .ordinal()
                 .domain( allSectors )
                 .rangeBands( [0, width], .5);

  var xAxis = d3.svg
                .axis()
                .scale(xScale)
                .tickSize( height )
                .orient('bottom');

  var svg = d3.select('.research-section4-graph')
              .append('svg')
              .attr('width', width + margin.left + margin.right)
              .attr('height', height + margin.top + margin.bottom)
              .append('g')
              .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  var xAxisGroup = svg.append('g')
                      .attr('class', 'x axis')
                      .call(xAxis);

  xAxisGroup.selectAll('line')
            .attr('transform', 'translate(' + (xScale.rangeBand() / 1) + ', 0)' );

  var triangleGroup = svg.selectAll('.triangle-group')
                    .data(data)
                    .enter()
                    .append('g')
                    .attr('class', 'triangle-group');

  var triangle = triangleGroup.append('path')
                              .attr('d', function(d) {
                                return 'M ' + xScale(d.sector) + ' ' + yScale(0) + ' L ' + (xScale(d.sector) + (xScale.rangeBand() / 2)) + ' ' + yScale(0) + ' L ' + (xScale(d.sector) + xScale.rangeBand()) + ' ' + yScale(0) + ' Z';
                              })
                              .attr('class', function(d) {
                                return d.val > 0 ? 'triangle positive' : 'triangle negative';
                              });

  triangle.transition().duration(1000)
          .attr('d', function(d) {
            return 'M ' + xScale(d.sector) + ' ' + yScale(0) + ' L ' + (xScale(d.sector) + (xScale.rangeBand() / 2)) + ' ' + yScale( Math.max(0, d.val) ) + ' L ' + (xScale(d.sector) + xScale.rangeBand()) + ' ' + yScale(0) + ' Z';
          });

Answer 1

在 transition 设置中：

yScale( Math.max(0, d.val)

当d.val为负值时，yScale将使用yScale(0)作为绘图点，这就是路径不可见的原因，因为没有可用的'negative'位置值。将其更改为 yScale(d.val) 有效。 Plunkr here

D3 - 具有负值的路径

D3 - Paths with negative values

javascript

charts

svg

data-visualization

d3.js