In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Jun 1, 2021
1 star
Copy a SVG group into a D3.join
testsvg = {
const svg = d3.create('svg').attr("width", w).attr("height", h)
const main = svg.append("g").attr('id','test')
main.append('circle')
.attr('fill','red')
.attr("cx", w/2)
.attr("cy", h/2)
.attr("r", w/2);
main.append('line')
.attr('id','teLine')
.attr('x1',w/2)
.attr('y1',0)
.attr('x2',w/2)
.attr('y2',w)
.attr('stroke','black')
.attr('transform',`rotate(45,${w/2},${h/2})`)
return svg.node()
}
svg2 = {
let i = 0
const svg = d3.create('svg').attr("width", width).attr("height", width)
const main2 = svg.append("g").attr('id','main2')
let other = d3.select(testsvg)
let group = other.selectAll('#test').clone(true);
let c = main2.selectAll('g')
.data(data).join('g')
.attr("transform", ([i, j]) => `translate(${i},${j})`)
.attr('id', (d,i) => `C2_${i}`)
.append(() => group.clone(true).node())
return svg.node()
}
data = d3.cross(d3.range(0,width,w), d3.range(0,width,h))
h=width/10
w=width/10
d3 = require('d3')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
