2020年新年大赛！

Question

Arthur Alunts

Asked:2020-03-07 19:42:27 +0000 UTC2020-03-07 19:42:27 +0000 UTC 2020-03-07 19:42:27 +0000 UTC

如何以不同颜色的 d3.js 为数组中的部分形状着色？

772

给出的代码。我试着画：“一半的圆圈是蓝色的，一半是红色的（在上面写着：蓝色/红色的那一行），但什么也没有发生！” 代码取自 Q 中的 @Stranger 来自此处：Accessing array parameters from d3.js shapes

<!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>

2 个回答

Voted

Monkey Mutant · Answer 1 · 2020-03-07T19:55:05Z

例如，像这样 - 我添加了评论中的所有样式

https://codepen.io/topicstarter/pen/qBdVVQj - 这里有两个不同的偶数/奇数填充

<!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>

Arthur Alunts · Answer 2 · 2020-03-07T20:02:07Z

无论如何，这些家伙找到了他们需要的东西，感谢您的回答-问题已解决：

<!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>

如何以不同颜色的 d3.js 为数组中的部分形状着色？

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何以不同颜色的 d3.js 为数组中的部分形状着色？

2 个回答

相关问题