마스크가 적용될 때 d3 (d3.svg.arc)에 의해 생성 된 SVG 경로 요소

Question

d3 호 기능으로 생성 된 svg 경로 요소에 텍스처 (예 : 줄무늬)를 넣으려고합니다. 이 예제 (https://bl.ocks.org/jfsiii/7772281)는 정확히 원하는 것입니다 (마스크를 적용하기 위해 CSS 사용). 그러나 d3 arc 함수로 만든 경로 요소에 적용하면 경로가 사라집니다.

나는 문제를 보여주기 위해 jsfiddle을 했어. Mike Bostock (http : // bl.ocks.org/mbostock/3887235)의 원형 차트 예제를 사용하고 다른 예제의 마스크를 적용했습니다. 원형 차트 (5-13 세 슬라이스)에 마스크를 적용하려고하는데 표시되지 않습니다. 심지어 svg path 요소에 문제가 있다고 생각했지만 svg (jsfiddle의 파란색 직사각형)에 경로를 명시 적으로 지정하면 마스크가 작동합니다.

누구에게 이런 일이 발생했는지 알 수 있습니까? d3 arc 함수에서 누락 된 구성입니까? 내가해야 할 모든 단계와 나는 아니야? 정말 CSS로 마스크를 사용하고 싶습니다. 나는 마스크를 적용하고있어

코드 부분 :

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

jsfiddle 문제를 보여주는.

감사합니다.

Answer 1

귀하의 마스크는 y 방향으로 0에서 100 %까지 공간을 차지하며, 귀하의 호 path은 y 방향으로 -46에서 -125까지의 공간을 차지하지만 두 개는 전혀 겹치지 않습니다.

그래서, 단순히 더 부정적인 당신의 RECT를 시작

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)'); 

업데이트 fiddle합니다.

---

전체 코드 :

//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>