SVG-Pfadelement erstellt von d3 (d3.svg.arc) verschwindet, wenn die Maske angewendet wird

Question

Ich versuche, Texturen (z. B. Streifen) auf ein SVG-Pfadelement zu setzen, das mit der d3 arc-Funktion erstellt wurde. Ich fand dieses Beispiel (https://bl.ocks.org/jfsiii/7772281), das ist genau das, was ich will (mit css, um die Maske anzuwenden), aber wenn ich auf ein Pfadelement anwenden erstellt durch d3 Bogenfunktion, verschwindet der Pfad.

Ich habe eine jsfiddle, um das Problem zu zeigen. Ich habe das Tortendiagramm-Beispiel von Mike Bostock (http://bl.ocks.org/mbstock/3887235) verwendet und die Maske aus dem anderen Beispiel übernommen. Ich versuche, die Maske auf das Kreisdiagramm (Scheibe von 5-13 Jahren) anzuwenden und es wird nicht angezeigt. Ich dachte sogar, es war ein Problem mit SVG-Pfad-Element, aber wenn ich einen Pfad explizit auf der Svg (Blue Rect auf der JSFiddle) erstellen, funktioniert die Maske.

Wer hat irgendwelche Ideen, warum das passiert? Ist es irgendeine Konfiguration, die mir in der d3 Bogenfunktion fehlt? Irgendwelche Schritte, die ich tun sollte, und ich nicht? Ich würde wirklich gern Maske für CSS benutzen.

-Code Teil, wo ich die Maske bin Anwendung:

// selecting slice with population (4499890) 
d3.select('#id_4499890').classed('hbar',true); 

Die jsfiddle zeigt das Problem.

Danke!

Answer 1

Ihre Maske ist ein rect Besatzungsraum von 0 bis 100% in y-Richtung, Ihr Bogen path obwohl sie Raum in der y-Richtung von -46 bis -125 besetzen, die beide nicht überlappen.

Also, starten Sie einfach Ihre rect mehr negativ:

defs.append("mask") 
    .attr("id","mask-stripe") 
    .append("rect") 
    .attr("x","-200") 
    .attr("y","-200") 
    .attr("width","100%") 
    .attr("height","100%") 
    .attr("fill",'url(#pattern-stripe)'); 

aktualisieren fiddle.

---

Voll Code:

//adding the pattern 
 
var defs = d3.select("#svgPattern").append("defs"); 
 
    defs.append("pattern") 
 
    .attr("id","pattern-stripe") 
 
    .attr("width","4") 
 
    .attr("height","4") 
 
    .attr("patternUnits","userSpaceOnUse") 
 
    .attr("patternTransform","rotate(45)") 
 
    .append("rect") 
 
    .attr("width","2") 
 
    .attr("height","4") 
 
    .attr("transform","translate(0,0)") 
 
    .attr("fill","white"); 
 

 
    defs.append("mask") 
 
    .attr("id","mask-stripe") 
 
    .append("rect") 
 
    .attr("x","-200") 
 
    .attr("y","-200") 
 
    .attr("width","100%") 
 
    .attr("height","100%") 
 
    .attr("fill",'url(#pattern-stripe)'); 
 

 
function drawChart(){ 
 
    var width = 660, 
 
     height = 300, 
 
     radius = Math.min(width, height)/2; 
 

 
    var color = d3.scale.ordinal() 
 
     .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
 

 
    var arc = d3.svg.arc() 
 
     .outerRadius(radius - 10) 
 
     .innerRadius(0); 
 

 
    var labelArc = d3.svg.arc() 
 
     .outerRadius(radius - 40) 
 
     .innerRadius(radius - 40); 
 

 
    var pie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { return d.population; }); 
 

 
    function type(d) { 
 
    d.population = +d.population; 
 
    return d; 
 
    } 
 

 
    var svg = d3.select("#svgPattern") 
 
     .attr("width", width) 
 
     .attr("height", height) 
 
    \t .append("g") 
 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
    var g = svg.selectAll(".arc") 
 
     .data(pie(data)) 
 
     \t .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
    g.append("path") 
 
     .attr("d", arc) 
 
     .attr("id", function(d) { return 'id_'+d.data.population; }) 
 
     .style("fill", function(d) { return color(d.data.age); }); 
 

 
    g.append("text") 
 
     .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")";}) 
 
     .attr("dy", ".35em") 
 
     .text(function(d) { return d.data.age; }); 
 

 
     // selecting slice with population (4499890) 
 
     d3.select('#id_4499890').classed('hbar',true); 
 
} 
 

 
var data = [ 
 
    { 
 
    "age": "<5", 
 
    "population": 2704659 
 
    }, 
 
    { 
 
    "age": "5-13", 
 
    "population": 4499890 
 
    }, 
 
    { 
 
    "age": "14-17", 
 
    "population": 2159981 
 
    }, 
 
    { 
 
    "age": "18-24", 
 
    "population": 3853788 
 
    }, 
 
    { 
 
    "age": "25-44", 
 
    "population": 14106543 
 
    }, 
 
    { 
 
    "age": "45-64", 
 
    "population": 8819342 
 
    }, 
 
    { 
 
    "age": "≥65", 
 
    "population": 612463 
 
    } 
 
]; 
 

 
drawChart();

.arc text { 
 
    font: 10px sans-serif; 
 
    text-anchor: middle; 
 
} 
 

 
.arc path { 
 
    stroke: #fff; 
 
} 
 

 
.hbar { 
 
    mask: url(#mask-stripe) 
 
} 
 
.thing-2{ 
 
    fill: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<!-- 
 
    Pie chart from: http://bl.ocks.org/mbostock/3887235 
 
    Mask example from: https://bl.ocks.org/jfsiii/7772281 
 
    --> 
 
<svg id="svgPattern" > 
 
    <!-- bar chart --> 
 
    <rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect> 
 
    <rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect> 
 
    <rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect> 
 
    <path d="M0,150 150,150 150,200 0,200" class="hbar" fill="blue" /> 
 
    
 
</svg>