d3使用svg路徑代替rects的自定義條形圖欄

Question

我正在嘗試構建d3條形圖，但由於設計師的鬼祟，我需要在每個欄的左上角和右上角都有圓角。我想我在某個地方，但我可以用一些幫助來推動它。

還有很多關於d3和svg的上坡曲線，所以我希望我沒有漏掉任何明顯的東西。

我已經成功地使用rects（註釋部分）做了這項工作，但是有一個缺陷，可能是我如何繪製路徑。我將作爲參數傳遞給topRoundedRect函數（例如，函數（datum，index）{return x（index）;}）的匿名函數在被追加到路徑的d屬性之前未被求值，而且我也沒有理解爲什麼。所以，我最終得到了如下的錯誤：

Error: Problem parsing 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"

你能提供任何意見將是非常美妙的。下面的代碼。

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

Answer 1

您的屬性的參數應該是一個函數，它將數據和索引作爲參數。試試：

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