Question

我已经在stackoverflow以及其他互联网上彻底研究了这个问题。我遇到的问题是d3并且每次单击鼠标时都会改变圆圈颜色。

理念：我已经实现了工作代码，每次点击鼠标时都会添加一个圆圈，显示用户点击的位置。但是，我想要每个圆圈的颜色，因此每次点击都是不同的。我查看过切换功能，但不会改变每次点击创建的每个圆圈的颜色。

以下是目前的代码：

HTML:    
<svg class="plot">
</svg>

CSS:
.plot 
{
    background-color: #000;
    width: 500px;
    height: 500px;
}

JavaScript:
(function() {
    var svg = d3.select('svg');

    function drawCircle(x, y, size) {
        console.log('Drawing circle at', x, y, size);
        svg.append("circle")
            .style("fill","red")
            .attr("cx", x)
            .attr("cy", y)
            .attr("r", size);
    }

    svg.on('click', function() {
        var coords = d3.mouse(this);
        console.log(coords);
        drawCircle(coords[0], coords[1], 5);
    });


})();

任何帮助都会很棒！这里还有jsfiddle链接：https://jsfiddle.net/pwilliams/2yczn6q3/

Answer 1

使用此：

svg.style("fill",'#'+Math.floor(Math.random()*16777215).toString(16));

作为功能：

'#'+Math.floor(Math.random()*16777215).toString(16);

会返回从000000到FFFFFF的十六进制数。

Ps：16777215是抽象的FFFFFF。

希望这有助于你。

Answer 2

您需要为每个圈子上的style("fill", ...)属性提供不同的值。这将导致每个 new 圆圈具有不同的颜色，但不会改变现有圆圈的颜色（这有点复杂）。

如果您想从准备好的颜色列表中随机选择，您应该创建一个颜色数组（按名称或十六进制代码）和一个返回随机颜色的函数。每次绘制圆形时，调用该函数，它将从数组中选择并返回一种颜色。

这样的事情：

＆＃13;

var colors = ["red", "green", "blue", "yellow", "orange", "purple", "gray"];

function getColor() {
  return colors[Math.round(Math.random() * colors.length)];
}

(function() {
  var svg = d3.select('svg');

  function drawCircle(x, y, size) {
    console.log('Drawing circle at', x, y, size);
    svg.append("circle")
      .style("fill", getColor())
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", size);
  }

  svg.on('click', function() {
    var coords = d3.mouse(this);
    console.log(coords);
    drawCircle(coords[0], coords[1], 5);
  });


})();

＆＃13;

.plot {

  background-color: #000;

  width: 500px;

  height: 500px;

}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg class="plot">
</svg>

＆＃13;

要按顺序使用颜色，您只需保留一个计数器：

var colors = ["red", "green", "blue", "yellow", "orange", "purple", "gray"];
var colorState = 0;

function getColor() {
  var color = colors[colorState];
  colorState = (colorState + 1) % colors.length; // keep it from going OOB
  return color;
}

Answer 3

在随机颜色this answer的帮助下，您可以执行以下操作：

(function() {
    var svg = d3.select('svg');

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function drawCircle(x, y, size) {
        console.log('Drawing circle at', x, y, size);
        svg.append("circle")
            .style('fill',getRandomColor())
            .attr("cx", x)
            .attr("cy", y)
            .attr("r", size);
    }

    svg.on('click', function() {
        var coords = d3.mouse(this);
        console.log(coords);
        drawCircle(coords[0], coords[1], 5);
    });


})();

我更新了你jsFiddle：https://jsfiddle.net/2yczn6q3/19/

每次单击鼠标时，如何更改通过d3创建的圆的颜色？

3 个答案: