score:2
Accepted answer
it seems you have a dependency version issue - the code in the github project is several years old and the instructions are loading much later versions of the dependencies than when the example code was written.
i get an npm error trying to install d3js
and jsdom
is on v16.4. if i run:
npm install jsdom d3 --save
my package.json
is:
{
"name": "test-jsdom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"error: no test specified\" && exit 1"
},
"author": "",
"license": "isc",
"dependencies": {
"d3": "^6.5.0",
"jsdom": "^16.4.0"
}
}
github user dam1r89 shows a way to do what you are trying on later versions in this gist.
my take on it:
const d3 = require("d3");
const fs = require("fs");
const {jsdom} = require("jsdom");
// init d3 - https://gist.github.com/tomgp/c99a699587b5c5465228
const minhtml = "<html><head></head><body></body></html>";
const dom = new jsdom(`${minhtml}`, { pretendtobevisual: true });
const window = dom.window;
window.d3 = d3.select(window.document);
// d3js code * * * * * * * * * * * * * * * * * * * * * * * *
var svg = window.d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);
svg.append("rect")
.attr("id", "rect1")
.attr("x", 10)
.attr("y", 10)
.attr("width", 80)
.attr("height", 80)
.style("fill", "green");
// end (d3js) * * * * * * * * * * * * * * * * * * * * * * * *
console.log( window.d3.select("body").html() );
which outputs:
<svg width="100" height="100"><rect id="rect1" x="10" y="10" width="80" height="80" style="fill: green;"></rect></svg>
Source: stackoverflow.com
Related Query
- jsdom.env is not a function exporting svg to image
- Displaying SVG elements with D3 and d3.slider: Uncaught TypeError: .exit is not a function
- "Property does not exist on type {}" error when using anonymous function with D3 SVG Symbol
- D3 Image SVG not showing
- Exporting svg to png or other image with styling, using JavaScript
- Adding image to svg container using d3 not working on FF and Safari
- SVG getBBox function returns zero in FireFox & Edge (but not in Chrome)
- Offline / IDE Means of Exporting Graph as SVG or PNG Image
- Change xlink:href link of svg image when image does not exits in D3js?
- SVG not showing when using pattern to mask an image
- Text not wrapping in d3 SVG element even when using Bostock's wrap function
- Rotating an SVG image using D3.JS not working
- data uri as background image of svg not converted to canvas on safari live site
- svg rect image is not displayed on firefox
- Not able to see the background image in svg rect
- svg image not visible after reload
- D3 and jQuery - Ajax success function fill color change is not applied to D3 SVG
- How to add an image to an svg container using D3.js
- SVG foreignObject contents do not display unless plain text
- d3 click coordinates are relative to page not svg - how to translate them (Chrome error)
- Title Attribute not working for an SVG Rect on Safari
- d3.js - mouseover event not working properly on svg group
- "Interpolate" is not a function
- SVG not rendering properly as a backbone view
- Auto width and height for SVG image
- internet explorer 10 not showing svg path (d3.js graph)
- Exporting D3.js graphs to static SVG files, programmatically
- D3 transition looping throwing Uncaught TypeError: t.call is not a function
- D3 - Positioning tooltip on SVG element not working
- d3.mouse is not a function
More Query from same tag
- Set domain on ordinal scale from tsv data
- D3 - Nesting multiple charts from the same dataset
- d3js select circle with specific text label
- Styling a Legend in D3
- D3: Transition Treemap and retain original group sizing
- Get D3.js sums before next key
- D3.js : Uncaught TypeError: Cannot read property 'document' of undefined
- d3js Redistributing labels around a pie chart
- Layout difference in SVG when added dynamically
- How to pass data from django to d3.js
- D3.js - How to solve NAN error while dragging the line graph (Jsfiddle provided)
- D3 force layout: how to update link color?
- Move d3 circles away from center circle - force layout
- Javascript compute percentages totals on array of objects by key
- How to create a responsive map using d3
- transition between two datasets, from a single line chart to a multiline chart, in d3
- How to draw mirrored x-axis(inverted) bar chart in d3?
- Adding a Background to certain part of a graphic with nvd3
- How can I clip a trendline on a d3 scatterplot chart?
- How to add space between axis and line in D3 line chart?
- D3 Image SVG not showing
- Appending svg of d3 chart to separate divs when there are multiple json files
- Tooltip always displaying the same value
- change the attribute of circles based on multiple selections in d3.js
- d3.js dirty svg (empty tag) after filtering
- div element is getting appended outside the body
- How to set fixed number of ticks despite the number of date range
- How to translate svg element along y-axis?
- Two Colors on same link between node in d3.js
- how to find graph nodes based on a function?