Как совместить svg и body в d3.js?

Question

Хочу добавить фон, и многоугольник(первый код) ко второму коду (код с кружочками), но не могу понять, как все это совместить. Помогите пожалуйста...)

var canvas = d3.select("body")
   .append("svg")
   .attr("height", SetHeight1)
   .attr("width", SetWidth1);
var image1=canvas.append("svg:image")
  .attr("xlink:href", "res/1.svg")
  .attr("x",0)
  .attr("y",0)


var polygon0=canvas.append("polygon")
for(var i=0;i<=maxddd-1;i++){
   polygon0=canvas.append("polygon")
   .attr("points", 111,111,111,122,222,222,212,122)// здесь было исправлено
   .style("fill", "yellow")
   .style("stroke", "black")
   .style("strokeWidth", "1px")  
   }

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>

<button onclick="upd()">upd()</button><br>
<svg width="1200" height="966"></svg>
<script>

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var radius = 20;
var circle_data1 = d3.range(20).map(function(i) {
  return {x: 100+i*50, y: rnd()};
});


 
var circles = d3.select("svg")
  .append("g")
  .attr("class", "circles")
  .selectAll("circle")
  .data(circle_data1)
  //.data(circle_data2)
  .enter()
  .append("circle")
  .attr("cx", function(d,i) {return (d.x)})
  .attr("cy", function(d,i) {return (d.y)})
  .attr("r", radius)
  .style('transition', "200ms")
  .attr("fill", function(d,i) {
    if(i<=4){
	return "red"
	
	}
	
	
	else if(i>=10){return  "blue"}
	else {return "green"}
  })
  
  
  
  
  
  
  
  .call(d3.drag().on("start", function(d) {
          d3.select(this)
            .raise()
            .attr('stroke', 'black')
            .style('transition', "unset")
        }).on("drag", function(d) {
          d3.select(this)
            .attr("cx", d.x = d3.event.x)
            .attr("cy", d.y = d3.event.y);
        }).on("end", function(d) {
          d3.select(this)
            .attr('stroke', 'transparent')
            .style('transition', "200ms")
        })
  );

function upd () {

  var newData = [
    100, rnd(), 150, rnd(), 200, rnd(), 250, rnd(), 300, rnd(),
    350, rnd(), 400, rnd(), 450, rnd(), 500, rnd(), 550, rnd()
  ];

  circle_data1.forEach(function(d, i) {
    d.x = newData[i * 2]
    d.y = newData[i * 2 + 1]
	
  });

  circles.data(circle_data1)
    .attr("cx", function(d) {return (d.x)})
    .attr("cy", function(d) {return (d.y)})
}

function rnd() {
  return 20 + Math.random() * 110
}
</script>

<style>
</style>
</html>

Answer 1

Удалось!

<!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
 <style>
html,body{
  overflow-y:hidden;
}
</style>
<body>
<script>


var canvas = d3.select("body")
   .append("svg")
   .attr("height", 1024)
   .attr("width", 768);
var image1=canvas.append("svg:image")
  .attr("xlink:href", "res/1.svg")
  .attr("x",0)
  .attr("y",0)
  
var polygon0=canvas.append("polygon")
    polygon0=canvas.append("polygon")
    polygon0.attr("points", [111,111,111,122,222,222,212,122])// здесь было исправлено
    polygon0.style("fill", "yellow")
    polygon0.style("stroke", "black")
    polygon0.style("strokeWidth", "1px")  
   
var radius = 11;
var circle_data1 = d3.range(20).map(function(i) {
  return {x: 100+i*50, y: rnd()};
});
 
var circles = d3.select("svg")
  .append("g")
  .attr("class", "circles")
  .selectAll("circle")
  .data(circle_data1)
  //.data(circle_data2)
  .enter()
  .append("circle")
  .attr("cx", function(d,i) {return (d.x)})
  .attr("cy", function(d,i) {return (d.y)})
  .attr("r", radius)
  .style('transition', "200ms")
  .attr("fill", function(d,i) {
    if(i<=4){
	return "red"
	
	}
	
	
	else if(i>=10){return  "blue"}
	else {return "green"}
  })
  
  
  
  
  
  
  
  .call(d3.drag().on("start", function(d) {
          d3.select(this)
            .raise()
            .attr('stroke', 'black')
            .style('transition', "unset")
        }).on("drag", function(d) {
          d3.select(this)
            .attr("cx", d.x = d3.event.x)
            .attr("cy", d.y = d3.event.y);
        }).on("end", function(d) {
          d3.select(this)
            .attr('stroke', 'transparent')
            .style('transition', "200ms")
        })
  );

function upd () {

  var newData = [
    100, rnd(), 150, rnd(), 200, rnd(), 250, rnd(), 300, rnd(),
    350, rnd(), 400, rnd(), 450, rnd(), 500, rnd(), 550, rnd(),
	100, rnd(), 150, rnd(), 200, rnd(), 250, rnd(), 300, rnd(),
	100, rnd(), 150, rnd(), 200, rnd(), 250, rnd(), 300, rnd()
  ]

  circle_data1.forEach(function(d, i) {
    d.x = newData[i * 2]
    d.y = newData[i * 2 + 1]
	
  })

  circles.data(circle_data1)
    .attr("cx", function(d) {return (d.x)})
    .attr("cy", function(d) {return (d.y)})
}

function rnd() {
  return 20 + Math.random() * 110
}
</script>
</body>
</html>

БЛОГ НА HUSL

Как совместить svg и body в d3.js?

Ответы (1 шт):