Question

我基本上使用的是http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bar_labels的修改版本。

我希望能够为每个值添加左边的边框和该边框的特定颜色（具有该边框的特定颜色）。

我不确定从哪里开始添加它。

有什么想法吗？

感谢。

更多细节：这是我想要获得的：https://dl.dropboxusercontent.com/u/2227188/Image%202.png - 左边的边框是问题。（jsfiddle.net/mkzTk/5/这就是我现在拥有的几乎是示例中的内容 - 我不知道从哪里开始添加边框）

Answer 1

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

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

Answer 2

我会根据某个数据点将每个bar + edge对设置为自己的组，然后将两个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
 })

DimpleJS条形图造型列

2 个答案: