d3自定义条形图栏使用svg路径而不是rect [英] d3 custom bar chart bars using svg paths instead of rects

问题描述

我试图建立一个d3的条形图，但由于一个鬼鬼祟祟的设计师，我需要在每个栏的左上角和右边的圆角。我想我在某个地方，但我可以使用一点帮助推它的线。

I'm trying to build a d3 bar chart, but due to a sneaky designer, I need rounded corners on the top-left and -right of each bar. I think I'm getting somewhere, but I could use a bit of help to push it over the line.

仍然非常在上坡曲线学习关于d3和svg ，所以我希望我没有错过任何明显的。

Still very much on the uphill curve learning about d3 and svg, so I hope I haven't missed anything obvious.

我已经成功地使用rects（注释掉部分），但有一个缺陷，可能在如何我画的路径。作为参数传递给topRoundedRect函数（例如function（datum，index）{return x（index）;}）的匿名函数在被追加到路径的d属性之前不会被求值，我不会明白为什么。所以我最终得到这样的错误：

I have successfully made this work using the rects (commented out section), but there's a flaw, probably in how I'm drawing the paths. The anonymous functions I'm passing as arguments into the topRoundedRect function (e.g. function(datum, index) { return x(index); }) are not being evaluated before being appended to the d attribute of the path, and I don't understand why. So I end up getting an error like this:

错误：问题解析d =Mfunction（datum，index）{return x（index） ;} 3，function（datum）{return height - y（datum）;} h34a3,3 0 0 1 3,3vNaNh-40vNaNa3,3 0 0 1 3，-3z

您可以提供的任何建议都会很棒。代码如下。

Any advice you can offer would be fantastic. Code below.

var data = [60.45,60.45,89.54,120.34,106.45,127.43];

var barWidth = 40;
var width = (barWidth + 10) * data.length;
var height = 500; 


var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum; })]).
  rangeRound([0, height]);

// add the canvas to the DOM
var barDemo = d3.select("body").
  append("svg").
  attr("width", width).
  attr("height", height);


function topRoundedRect(x, y, width, height, radius) {
    return "M" + (x + radius) + "," + y
       + "h" + (width - (radius * 2))
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - radius)
       + "h" + (0-width)
       + "v" + (0-(height-radius))
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius
       + "z";
}  

  /*
barDemo.selectAll("rect").
  data(data).
  enter().
  append("svg:rect").
  attr("x", function(datum, index) { return x(index); }).
  attr("y", function(datum) { return height - y(datum); }).
  attr("height", function(datum) { return y(datum); }).
  attr("width", barWidth).
  attr("fill", "url(#barGradient)");   */


  barDemo.selectAll("path").
    data(data).
    enter().append("path").
        attr("d", topRoundedRect(
            function(datum, index) { return x(index); },
            function(datum) { return height - y(datum); },
            barWidth,
            function(datum) { return y(datum); },
            3))
        .style("fill","#ffcc00")
        .style("stroke","none");      

推荐答案

属性的参数应该是一个函数，基准和索引作为参数。尝试：

The argument for your attribute should be a function that takes the datum and index as parameters. Try:

attr("d", function(datum, index) { 
    return topRoundedRect(    x(index), 
                              height - y(datum),
                              barWidth,
                              y(datum),
                              3);
})

这篇关于d3自定义条形图栏使用svg路径而不是rect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！