2

私は d3js を使用しています。基本的なパスがあり、このようなハッチングで塗りつぶしたいと考えています。

しかし、d3jsでこれを行うことはできません。ここでは、def、pattern、style を使用した私の単純なコードを確認できます...

points = [[10, 10], [200, 20], [10, 500]];

 line = d3.svg.line();

  var svg = d3.select("body").append("svg")
   .attr("width", 600)
   .attr("height", 500)
   .attr("margin", 30)
   .attr("tabindex", 1);


   var defs = svg.append('defs');
defs.append('pattern')
    .attr('id', 'hash')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', '6')
    .attr('height', '6');

/*  var defs = svg.append('pattern');
defs
    .attr('id', 'hash')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', '6')
    .attr('height', '6');*/


path = svg.append("path")
    .datum(points);


path.attr("d", function (d) {
    var lines = new Array();

    for (var i = 0; i < d.length; i++) {
        lines.push([d[i][0], d[i][1]]);
    }
    return line(lines);
})
//.style("fill", "red");
//.attr("fill", "red") 
.style("fill", "url(#hash)");//url(#hash)
4

1 に答える 1

4

ソリューションに必要なすべての部品がすでに揃っています。defs例のようにSVG を追加するだけです。

var defs = svg.append('defs');
var g = defs.append("pattern")
    .attr('id', 'hash')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', '25')
    .attr('height', '25')
    .append("g").style("fill", "none")
    .style("stroke", "black")
    .style("stroke-width", 1);
g.append("path").attr("d", "M0,0 l25,25");
g.append("path").attr("d", "M25,0 l-25,25");

ここでjsfiddleを更新しました。

于 2013-07-10T11:09:40.967 に答える