DimpleJS条形图样式列

您可以在绘制系列的每个元素后附加一个矩形,如下所示:

mySeries.afterDraw = function (s, d) {
    var shape = d3.select(s);
    svg.append("rect")
        .attr("x", shape.attr("x"))
        .attr("y", shape.attr("y"))
        .attr("height", shape.attr("height"))
        .attr("width", "10px")
        .style("fill", shape.style("stroke"))
        .style("pointer-events", "none"); 
};

您提到的示例已经使用afterDraw函数,因此只需将上面的内容添加到现有的标签方法中即可。

它看起来不错,这里有一个例子:

http://jsbin.com/lorin/9/edit?js,output#J:L20

我会根据某个数据点将每个条+边对设置为自己的组,然后添加两个 rect 元素添加到该组。颜色的差异可以用来赋予它们与众不同的颜色。

您的代码将如下所示:

var monthBars = d3.selectAll('.monthBar') //These will be for each chart
 .data(allMyData, idFunction) //Assign and key your data
 .enter()
 .append('g')
 .classed('monthBar', true);
 .each(function(d){

   var taskGroups = d3.select(this).selectAll('.taskGroup')
    .data(d.dataForThisMonth, taskIdFn)
    .enter()
    .append('g')
    .classed('.taskGroup', true);
    .attr('transform', ...) //Define the x and y positioning for the group

   taskGroups.append('rect')
    //Make this the 'body' rect with the text in it

   taskGroups.append('rect')
    //Make this the edge rect
 })