如何在SVG中创建此形状？

您将需要使用自定义路径数据生成功能。如果您不熟悉path数据属性的工作方式，则可能会发现本教程是一个有用的起点（在此处和此处继续）。

由于没有更多工作了，因此我建议将整个条形绘制为自定义路径，而不要使用单独的基础。如果您确实需要单独的元素，则应该很容易地进行调整。

您的酒吧代码是：

svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.episode); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.donations); })
    .attr("height", function(d) { return height - y(d.donations); })
    .style("fill", function(d) { return d.bar_color; })
    .attr("rx", 10)
    .attr("ry", 10)
    .on("mouseover", function(d) {      
        tooltip.transition().duration(200).style("opacity", .9);      
        tooltip.html("NGO: " + d.ngo)  
        .style("left", (d3.event.pageX) + "px")     
        .style("top", (d3.event.pageY - 28) + "px");    
    })                  
    .on("mouseout", function(d) {       
        tooltip.transition().duration(500).style("opacity", 0);   
    });

工具提示的鼠标悬停功能将不会改变，因此在其余的讨论中将不再赘述。填充样式也不会改变，类也不会改变。但是，我们将把<rect>元素变成<path>元素，并且将所有其他属性（x / y / width / height / rx / ry）替换为路径数据“ d”属性：

svg.selectAll(".bar")
    .data(data)
    .enter().append("path")
    .attr("class", "bar")
    .style("fill", function(d) { return d.bar_color; })
    .attr("d", function(d) { 
         return /* a path data string that completely describes this shape */; 
    })
    .on("mouseover",
        /* etc */

现在，让我们分析一下该形状。从左下角开始，您需要按照以下说明进行绘制：

• 移动到喇叭形底座的起点，在条之间的填充中间，在轴线上；
• 弯曲到条的左边缘，距轴的距离等于喇叭口半径；
• 直线几乎到钢筋的顶部，在顶部弯曲半径附近终止，该半径是钢筋宽度的一半；
• 半圆（或两条曲线），直到完整的条形高度，然后再向下移到另一侧；
• 直线后退几乎到轴线；
• 创建另一个喇叭形的底座，弯曲到填充的一半；
• 关闭路径以重新连接到开始。

对于move命令和line命令，只需要指定目标（x，y）点。对于close命令，您根本不需要给出任何要点。对于曲线，它变得稍微复杂一些。您可以使用圆弧来执行此操作（有关语法，请参见我的第二个教程），但是它有点简单，如果使用二次曲线，则外观几乎相同，控制点是您要弯曲的拐角位置。也就是说，从（0,0）到（1,1）且控制点为（0,1）的二次曲线几乎是以（1,0）为中心的圆弧。

(0,0)
  @ —  *  << control point (0,1)
      \
       |     ...something like this, but prettier!
       @
     (1,1)

有了这种攻击计划，并从作为参数的paddingProportion确定耀斑的宽度x.rangeRoundBands()，您将得到：

.attr("d", function(d) { 
    var barWidth = x.rangeBand();
    var paddingWidth = barWidth*(paddingProportion)/(1-paddingProportion);
    var flareRadius = paddingWidth/2;
    var topRadius = barWidth/2;

    var xPos =  x(d.episode);
    var yPos =  y(d.donations);

    return [ "M", [ (xPos - flareRadius), height], //start at bottom left of base
             "Q", [xPos, height], //control point for flare curve
                    [xPos, (height-flareRadius)], //end point of flare curve
             "L", [xPos, (yPos + topRadius)], //line to start of top curve
             "Q", [xPos, yPos], //control point for left top curve
                    [(xPos + topRadius), yPos],  //end point for left top curve
             "Q", [(xPos + barWidth), yPos],  //control point for right top curve
                    [(xPos + barWidth), (yPos + topRadius)], //end point for right top
             "L", [(xPos + barWidth), (height-flareRadius)], //line to start of right flare
             "Q", [(xPos + barWidth), height], //control for right flare
                    [(xPos + barWidth + flareRadius), height], //end of right flare
             "Z" //close the path
            ].join(" ");

})

http://jsfiddle.net/rdesai/MjFgK/62/

最终返回的值是一个字符串，我将其组合为字母数组和每个（x，y）点的两个元素的数组，然后将它们全部与空格连接在一起。这比使用进行处理要快一些+，并且可以将数据保持在一个有组织的结构中。最后返回的字符串看起来像

M 47.75,195 Q 52,195 52,190.75 L 52,26.056240786240778 Q 52,9.056240786240778 69,9.056240786240778 Q 86,9.056240786240778 86,26.056240786240778 L 86,190.75 Q 86,195 90.25,195 Z

现在，大多数情况下都是您想要的形状，但是最短的条形上会有些混乱，其中最上面的曲线的半径大于条形的高度。快速进行了几次最大/最小检查，以确保点的y值始终不小于yPos或大于height，以进行清理：

.attr("d", function(d) { 
    var barWidth = x.rangeBand();
    var paddingWidth = barWidth*(paddingProportion)/(1-paddingProportion);
    var flareRadius = paddingWidth/2;
    var topRadius = barWidth/2;

    var xPos =  x(d.episode);
    var yPos =  y(d.donations);

    return [ "M", [ (xPos - flareRadius), height], //start at bottom left of base
             "Q", [xPos, height], 
                    [xPos, Math.max((height-flareRadius), yPos)], 
             "L", [xPos,  Math.min((yPos + topRadius), height)],
             "Q", [xPos, yPos], 
                    [(xPos + topRadius), yPos],
             "Q", [(xPos + barWidth), yPos], 
                    [(xPos + barWidth), Math.min((yPos + topRadius), height)],
             "L", [(xPos + barWidth), Math.max((height-flareRadius), yPos)],
             "Q", [(xPos + barWidth), height], 
                    [(xPos + barWidth + flareRadius), height],
             "Z"
            ].join(" ");

})

http://jsfiddle.net/MjFgK/63/

这要花很多时间，所以我建议您花一些时间来尝试一下，尝试改变形状，尝试使用圆弧而不是二次曲线，并尝试从示例图像的第一个和最后一个小节重新创建形状。或返回到最初的计划，即仅将基本形状创建为单独的元素。