Как покрасить часть фигур из массива в другой цвет d3.js?

Question

Дан код. Пробую рисовать: "Половина кругов -синими , а половина - красными (на строчке, где написано: blue / red ), но ничего не получается!" Код взят у @Stranger in the Q отсюда: Доступ к параметрам массива из фигур d3.js

<!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(10).map(function(i) {
  return {x: 100+i*50, y: rnd()};
});
var circle_data2 = d3.range(10).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) {return (d.x)})
  .attr("cy", function(d) {return (d.y)})
  .attr("r", radius)
  .style('transition', "200ms")
  .attr("fill", function(d) {
    if(d<=5){
	return "red"
	
	}
	
	
	else{return  "blue"}
  })
  
  
  
  
  
  
  
  .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

Вот так к примеру - добавил все то в style то что в комментарии

https://codepen.io/topicstarter/pen/qBdVVQj - вот здесь два fill разных even/odd

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  circle:nth-child(even){
  fill: red;
  }
</style>
<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(10).map(function(i) {
  return {x: 100+i*50, y: rnd()};
});
var circle_data2 = d3.range(10).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) {return (d.x)})
  .attr("cy", function(d) {return (d.y)})
  .attr("r", radius)
  .style('transition', "200ms")
  .attr("fill", function(d) {
    if(d<=5){
	return "red"
	
	}
	
	
	else{return  "blue"}
  })
  
  
  
  
  
  
  
  .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>

Answer 2

Парни нашел, то, что надо, в любом случае спасибо за ответ - вопрос исчерпан:

<!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(10).map(function(i) {
  return {x: 100+i*50, y: rnd()};
});
var circle_data2 = d3.range(10).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{return  "blue"}
  })
  
  
  
  
  
  
  
  .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>

БЛОГ НА HUSL

Как покрасить часть фигур из массива в другой цвет d3.js?

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