Question

现在，我的条形基座使用省略号设置为阴影：http://jsfiddle.net/rdesai/MjFgK/55/

如何更改样式以使基点看起来如下图所示？

enter image description here

修改

可以将此问题缩小为创建如下形状的形状：
enter image description here 我可以用这个形状代替椭圆。

如何将椭圆形代码修改为上面的形状？

svg.selectAll(".ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cx", function(d) { return x(d.episode) + 17; })
.attr("cy", function(d) { return y(0); })
.attr("rx", 20)
.attr("ry", 5)
.style("fill", function(d) { return d.shadow_color; })

Answer 1

您将需要使用自定义路径数据生成功能。如果您不熟悉路径数据属性的工作原理you may find this tutorial a useful starting point（续here和here）。

由于它不再有任何工作，我建议将整个条形图绘制为自定义路径，而不是单独的基础。如果你真的想要单独的元素，那么它应该是相当简单的。

你的酒吧代码是：

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 */

现在，让我们分析一下这个形状。从左下角开始，您需要以下指示来绘制它：

移动到扩口基座的起点，在杆之间的填充中间，在轴线上;
曲线到条形的左边缘，与光轴半径相等的距离;
直线几乎到了条形的顶部，由顶部曲线半径停止，这是条形宽度的一半;
半圆（或两条曲线）直到整个条形高度然后再向下到另一侧;
直线几乎回到轴线;
创建另一个喇叭形底座，弯曲到衬垫的中间位置;
关闭连接回start的路径。

对于move命令和line命令，您只需要给出目标（x，y）点。对于close命令，您根本不需要给出任何点。对于曲线，它会变得更复杂一些。您可以使用弧来完成此操作（请参阅我的第二个语法教程），但如果您使用二次曲线，控制点是您正在弯曲的角落位置，它会更简单一些，看起来大致相同。也就是说，从控制点（0,1）到（0,0）到（1,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/

这需要很多东西，所以我建议你花一些时间玩它，尝试改变形状，尝试使用弧而不是二次曲线，尝试从样本的第一个和最后一个条重新创建形状图片。或者回到原来的计划，即将基本形状创建为单独的元素。

如何在SVG中创建此形状？

1 个答案: