d3.js v5 изменение элемента из импортированного SVG - PullRequest
Новая
       36

d3.js v5 изменение элемента из импортированного SVG

0 голосов
/ 29 января 2019

Я новичок в d3.js v5, и я боролся с этим весь день.

У меня есть изображение, которое я создаю в inkscape, которое я хочу анимировать с помощью d3.js, но я не могукажется, что-то изменить.Ниже приведен простой пример:

RedCircle.svg 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg1482"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="RedCircle.svg">
  <defs
     id="defs1476" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-244.28571"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1044"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata1479">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#ff0000;stroke-width:0.52899998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.58699999, 0.529;stroke-dashoffset:0;stroke-opacity:1"
       id="RedCircle"
       r="100"
       cy="191.7355"
       cx="105.2645" />
  </g>
</svg>

index.html 

<body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>
        d3.xml('RedCircle.svg')
            .then(data => {
                document.body.append(data.documentElement)
            });
        var rc = d3.selectAll('#RedCircle')
        rc.style("stroke", "black");
        console.log(rc.attr("stroke"));
    </script>
</body>

Это должно сделать помеченный RedCircle черным и выводить черный.Тем не менее, я немного растерялся, почему это не работает.Я немного искал, но не мог найти решение.Появляется ошибка: 

TypeError: node is null

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 30 января 2019

Я не уверен, что это лучшее решение, но теперь оно работает.Я сделал обещание d3.xml переменной и использовал .then для выполнения манипуляций с изображениями.Спасибо Кодерино Хаварино за то, что он указал мне правильное направление. 

<!DOCTYPE html>
<meta charset="utf-8">

<body>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>
        var img = d3.xml('RedCircle.svg')
            .then(svg => {
                document.body.append(svg.documentElement)
            });
        img.then(function() {
            var rc = d3.select('[id=RedCircle]');
            rc.style("stroke", "#000000");
            console.log(rc.style("stroke"));
        });
    </script>
</body>
...