我正在寻找饼图区域中的填充填充。像这样
我找到填充代码表单here 所以我必须克隆路径属性并给它填充:url(#diagonalHatch)。如果我在chrome中手动执行它会工作。它显示了模式
现在我想要克隆该路径并给出该attr并将其插入兄弟。我试图访问该路径,但没有成功。 fiddle here。如果有人有jquery解决方案,那也没关系。 我目前的代码
var testdata = [
{
key: "eight two%",
y: 82
},
{
key: "eighteen%",
y: 18
}
];
nv.addGraph(function() {
var width = 500,
height = 500;
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.y(function(d) { return d.y })
.color(['red','green'])
.width(width)
.height(height);
d3.select("#test1")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
var svg = d3.select("#test1");
svg
.append('defs')
.append('pattern')
.attr('id', 'diagonalHatch')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append('path')
.attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
.attr('stroke', '#000000')
.attr('stroke-width', 1);
return chart;
});
var svg2 = d3.select("#test1");
var node = svg2.select(".nv-slice path").attr('d');
console.log(node);