getting an error d3.select is not a function

2,750 views
Skip to first unread message

Arun Kumar

unread,
Aug 24, 2016, 12:01:36 AM8/24/16
to d3-js
Hi Team,

I'm trying to add an svg image into the body. However it throws an error that d3.select is not a function (see attached screenshot). Also the width and height properties of the svg image are already defined in the .svg file. Should I add those properties again when I'm adding the svg file through the .append method using the .attr? 

Thanks,
Arun

Here are the contents of the code.

main HTML file

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Online EDA</title>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="d3script.js"></script>
</head>

<body>
<svg> 

</svg>
</body>

</html>


SVG file

<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">

 
<rect x="30" y="0" width="100" height="85" stroke="black" fill="yellow" stroke-width="2"/>

<line x1="0" x2="30" y1="18" y2="18" stroke="black" fill="black" stroke-width="2"/>
<line x1="0" x2="30" y1="36" y2="36" stroke="black" fill="black" stroke-width="2"/>
<line x1="0" x2="30" y1="54" y2="54" stroke="black" fill="black" stroke-width="2"/>
<line x1="0" x2="30" y1="72" y2="72" stroke="black" fill="black" stroke-width="2"/>
 
<line x1="130" x2="160" y1="18" y2="18" stroke="black" fill="black" stroke-width="2"/>
<line x1="130" x2="160" y1="36" y2="36" stroke="black" fill="black" stroke-width="2"/>
<line x1="130" x2="160" y1="54" y2="54" stroke="black" fill="black" stroke-width="2"/>
<line x1="130" x2="160" y1="72" y2="72" stroke="black" fill="black" stroke-width="2"/>
  
<text x="32" y="20">1 </text>
<text x="32" y="38">2</text>
<text x="32" y="58">3</text>
<text x="32" y="75">4</text>
  
<text x="120" y="75">5</text>
<text x="120" y="58">6</text>
<text x="120" y="38">7</text>
<text x="120" y="20">8</text>
</svg>

external script to add the svg file


$( document ).ready(function() {
  // Your d3 code here

var mysvg = d3.select("svg")
 .attr("width", 500)
    .attr("height", 500);
   
var img = mysvg.append("svg:image")
    .attr("xlink:href", "/IC-*pin.svg");
   
});



Screen Shot 2016-08-24 at 9.29.52 AM.png

Curran

unread,
Aug 25, 2016, 3:10:14 AM8/25/16
to d3-js
Hello,

The error is caused by not loading D3. Your code loads d3-path, which is a standalone module that does not include d3.select (which comes from d3-selection).

I would recommend removing this script tag

<script src="https://d3js.org/d3-path.v1.min.js"></script>

and adding this one, which includes the full D3 library (including d3.select)

<script src="https://d3js.org/d3.v4.min.js"></script>

Also, I'm not understanding why you need to use D3 if your end goal is to place an existing SVG image onto the page. If that's all you need to do, then the following should work (where mySVG.svg is replaced by the file name):

<img src="mySVG.svg">

Best regards,
Curran
Reply all
Reply to author
Forward
0 new messages