2

The svg document is embeded as file.

svg-file:

<?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="64px"
   height="64px"
   id="svgPic"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="New document 18">
  <g
     id="curvLayer"
     inkscape:label="Curv"
     inkscape:groupmode="layer">
    <path
       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 2.0162099,44.937652 C 19.928085,44.362124 23.033712,29.671999 33.839655,29.657316 44.913406,29.332988 44.178722,15.232728 60.486296,15.244392"
       id="path4373"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccc" />
  </g>
</svg>

and here is html with javascript, where I try to manipulate the svg with d3. But without success.

<body>
  <embed src="berg4.svg" type="image/svg+xml" id="svgpic"/>

  <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>

  <script type="text/javascript" charset="utf-8">

     var subdoc = document.getElementById("svgPic").getSVGDocument();
     var curvLayer = subdoc.getElementById("curvLayer");
     var myPoint = d3.select("#curvLayer").append("svg:circle")
            .attr("cx", x) //e.g. x = 100
            .attr("cy", y) //e.g. y = 100
            .attr("r", 4.5);
  </script>
</body>

The question is, how to add a new element like circle to this svg?

Jose Luis
  • 3,307
  • 3
  • 36
  • 53
Mark
  • 17,887
  • 13
  • 66
  • 93

2 Answers2

0

There are two problems I see with your code:

  1. Selecting your element: you are using document.getElementByID along with D3.select, this is un-necessary - you can select the element with only D3 using CSS selectors:

    d3.select("#curvLayer")

  2. Setting cx and cy attributes: you are setting your appended circles cx and cy attributes to 'x' and 'y', but these are not defined previously in your code. Try setting to static values or defining x and y prior:

    .append("circle")
    .attr("cx", 10)
    .attr("cy", 10)
    .attr("r", 4.5);

jsfiddle with these updates made: http://jsfiddle.net/qAHC2/308/

Josh
  • 5,460
  • 31
  • 38
  • The main problem here is, that the svg is a extern file. Therefore I cannot access the id with simply `d3.select("#curvLayer")` – Mark Mar 11 '13 at 09:36
  • I upgrade the question to to avoid same asks. – Mark Mar 11 '13 at 12:53
  • 1
    This might help: http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file – Josh Mar 11 '13 at 18:23
0

The trick is that you need to give D3 the external svg's root element. This can be done for your example like this:

var svgRoot = document.getElementById('svgpic').getSVGDocument().documentElement;
d3.select(svgRoot).select("#curvLayer").append("circle")
                                           .attr("cx", 10)
                                           .attr("cy", 10)
                                           .attr("r", 4.5);

Apparently for Firefox you may need to use contentDocument instead of getSVGDocument()

SuperFlux
  • 1
  • 1