0

I am looking for hatch fill in a pie chart area. Like this enter image description here

i have find hatch fill code form here So i have to clone path attribute and give it fill:url(#diagonalHatch) .Its working if i do it manually in chrome. it shows the pattern enter image description here

Now i want to clone that path and give that attr and insert it to sibling. I am trying to access that path but not successful. fiddle here . if someone had jquery solution it would be fine too. My current code

  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);
Community
  • 1
  • 1
Ali Nouman
  • 3,304
  • 9
  • 32
  • 53
  • It's not clear to me what your question is. Are you asking how to do the hatch fill or how to clone a path? – Lars Kotthoff Jun 17 '14 at 19:31
  • @LarsKotthoff Thank you for your previous help. I am looking for clone path so i can make hatch fill because on that path i would do fill:url(#dia) . That would create fill. – Ali Nouman Jun 17 '14 at 20:16
  • 1
    Still not clear on what you're looking for. Maybe [this question](http://stackoverflow.com/questions/17776641/fill-rect-with-pattern) helps? – Lars Kotthoff Jun 18 '14 at 10:54

0 Answers0