如何更改 D3js 上的符号类型颜色？

Question

我想更改 D3 代码上符号类型的颜色？我不确定如何让我的 var color = d3.scale.linear() 工作。我正在尝试随机化 D3 符号类型，但想通过颜色区分它们。

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

var w = 1260, //define the canvas
    h = 500,
    nodes = [], //nodes are shapes
    node; //return node..data

var color = d3.scale.linear()
    .domain ([0, h])
    .range ([0, w]);

//creating canvas with svg property
var canvas = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
    .nodes(nodes)
    .links([]) //links are between nodes
    .size([w, h]);

force.on("tick", function(d) {
  canvas.selectAll("path")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

setInterval(function(){

  // Add a new random shape.
  nodes.push({
    type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
    size: Math.random() * 300 + 100 //randomize size
  });

  // Restart the layout.
  force.start();

  canvas.selectAll("path")
      .data(nodes)
    .enter().append("path")
      .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
      })
      .attr("d", d3.svg.symbol()
        .size(function(d) { return d.size; })
        .type(function(d) { return d.type; }))
        .style("fill", "#69d3bf")
        .style("stroke", "#253544")
        .style("stroke-width", "1.5px")
        .call(force.drag);
}, 10); //1000 is time 

</script>

Answer 1

这是您的示例，只是稍微修改为可运行的代码片段：

var w = 400;
var h = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var nodes = [];

//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
  .nodes(nodes)
  .links([]) //links are between nodes
  .size([w, h]);

force.on("tick", function(d) {
  svg.selectAll("path")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
});

setInterval(function() {

  // Add a new random shape.
  nodes.push({
    type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
    size: Math.random() * 300 + 100 //randomize size
  });

  // Restart the layout.
  force.start();

  svg.selectAll("path")
    .data(nodes)
    .enter().append("path")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("d", d3.svg.symbol()
      .size(function(d) {
        return d.size;
      })
      .type(function(d) {
        return d.type;
      }))
    .style("fill", "#69d3bf")
    .style("stroke", "#253544")
    .style("stroke-width", "1.5px")
    .call(force.drag);

}, 3000); //1000 is time

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

请注意，仅支持六个符号。

我将提供两种解决方案，以帮助您入门。您可以调整它们以满足您的需要，当然，还需要借助文档。

第一个解决方案

代码的关键部分：

.style("fill",  function(d) {
  console.log(d);
  var symbolIndex = 0;
  for(var i=0; i<d3.svg.symbolTypes.length; i++){
    if(d.type == d3.svg.symbolTypes[i])
      symbolIndex=i;
  };
  return color(symbolIndex);
})

color定义为从黄色到紫色的线性比例：

var color = d3.scale.linear()
    .domain ([0, d3.svg.symbolTypes.length-1])
    .range (["yellow", "violet"]);

var w = 400;
var h = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var nodes = [];
var color = d3.scale.linear()
    .domain ([0, d3.svg.symbolTypes.length-1])
    .range (["yellow", "violet"]);

//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
  .nodes(nodes)
  .links([]) //links are between nodes
  .size([w, h]);

force.on("tick", function(d) {
  svg.selectAll("path")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
});

setInterval(function() {

  // Add a new random shape.
  nodes.push({
    type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
    size: Math.random() * 300 + 100 //randomize size
  });

  // Restart the layout.
  force.start();

  svg.selectAll("path")
    .data(nodes)
    .enter().append("path")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("d", d3.svg.symbol()
      .size(function(d) {
        return d.size;
      })
      .type(function(d) {
        return d.type;
      }))
    .style("fill",  function(d) {
      console.log(d);
      var symbolIndex = 0;
      for(var i=0; i<d3.svg.symbolTypes.length; i++){
        if(d.type == d3.svg.symbolTypes[i])
          symbolIndex=i;
      };
      return color(symbolIndex);
    })
    .style("stroke", "#253544")
    .style("stroke-width", "1.5px")
    .call(force.drag);

}, 3000); //1000 is time

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

第二种解决方案

如果你想为每个符号明确设置颜色，你可以使用这个：

var color = d3.scale.linear()
    .domain ([0, 1, 2, 3, 4, 5])
    .range (["red", "blue", "green", "tan", "gray", "orange"]);

var w = 400;
var h = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var nodes = [];
var color = d3.scale.linear()
    .domain ([0, 1, 2, 3, 4, 5])
    .range (["red", "blue", "green", "tan", "gray", "orange"]);

//https://github.com/mbostock/d3/wiki/Force-Layout#force
var force = d3.layout.force()
  .nodes(nodes)
  .links([]) //links are between nodes
  .size([w, h]);

force.on("tick", function(d) {
  svg.selectAll("path")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
});

setInterval(function() {

  // Add a new random shape.
  nodes.push({
    type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], //pushing symbol types
    size: Math.random() * 300 + 100 //randomize size
  });

  // Restart the layout.
  force.start();

  svg.selectAll("path")
    .data(nodes)
    .enter().append("path")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("d", d3.svg.symbol()
      .size(function(d) {
        return d.size;
      })
      .type(function(d) {
        return d.type;
      }))
    .style("fill",  function(d) {
      console.log(d);
      var symbolIndex = 0;
      for(var i=0; i<d3.svg.symbolTypes.length; i++){
        if(d.type == d3.svg.symbolTypes[i])
          symbolIndex=i;
      };
      return color(symbolIndex);
    })
    .style("stroke", "#253544")
    .style("stroke-width", "1.5px")
    .call(force.drag);

}, 3000); //1000 is time

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

如何更改 D3js 上的符号类型颜色？

How do I change symbol type colors on D3js?

javascript

svg

colors

d3.js

force-layout

第一个解决方案

第二种解决方案