D3 Açısal karışıklık: dolgu rengi değişmiyor

Question

D3 JS ile açısal uygulama geliştirin ve svg'nin dolgu rengini değiştiremediğim sorunla karşı karşıya.

bu kodu bakarsanız, ben bir svg oluşturmak olduğunu görmek ve benim satıcısından başka birini eklemek için çalışıyor olabilir:

function link (scope, element, attrs) { 
     var svgContainer = d3.select(element[0]).append("svg") 
              .attr("width", $window.screenX - 2*100) 
              .attr("id", "oil-game") 
              .attr("height", 1200); 

     var well = svgContainer.append("g"); 
     angular.forEach(scope.d3WellDetails, function (value, key) { 
      var circle = well.append("circle") 
            .attr("cx", 55) 
            .attr("cy", 100 + key*115) 
            .attr("r", 40) 
            .attr('stroke', '#0897c7') 
            .attr('stroke-width', '5') 
            .attr('fill', 'white'); 
      well.append("text") 
       .attr('x', 50) 
       .attr('y', 85 + key*115) 
       .attr('fill', '#0897c7') 
       .attr('font-size', 16) 
       .attr('font-weight', 900) 
       .text(value.Name); 
      well.append('svg:image') 
       .attr('xlink:href', '../../images/wells.svg') 
       .attr('x', 40) 
       .attr('y', 95 + key*115) 
       .attr("width", 30) 
       .attr("height", 30) 
       .attr('fill', '#0897c7'); 
     }); 
}    

ben yeni ekleme olduğum zaman sen son bölümüne bakmak istiyorum svg. .attr('xlink:href', '//') kullanıyorum, svg'nin dolgu rengini değiştiremiyorum.

Ancak .attr('src', '//') kullanırsam svg resmini görmüyorum, ancak geliştirici aracında bunu boş olarak görebiliyorum.

Bunu nasıl çözebilirim?

Answer 1

Buradaki sorun, Angular ile ilgili değil, dış SVG'yi görüntü olarak ekleme biçiminizle ilgilidir. Bunun yerine, bir SVG Tanımlaması olarak harici SVG'yi eklemenizi ve 'use' özelliği ile eklemenizi öneririm. Bu, içe aktarılan SVG'yi gerçeğin ardından şekillendirmenizi sağlar. Tanımdaki satır içi stillerin, gerçeği takiben js veya css ile eklenen stilleri geçersiz kılacağını unutmayın. İşte

bir örnek: https://jsfiddle.net/3fx1553f/

HTML:

<svg id="svg-defs" version="1.1" style="display:none"> 
    <defs> 
    <g id="gdef1"> 
     <circle id="s1" cx="200" cy="200" r="100" stroke="black" stroke-width="3" /> 
    </g> 
    </defs> 
</svg> 
<div id="container"> 
</div> 

CSS:

.fill-red { 
    fill: red; 
} 

JS:

var svg = d3.select('#container') 
    .append('svg') 
    .attr('id', 'main') 
    .attr('width', '540px') 
    .attr('height', '540px'); 

svg.append('g') 
    .attr('class','fill-red') 
    .append('use') 
    .attr('xlink:href', '#gdef1');