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

标签 javascript svg d3.js colors force-layout

我想更改 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>

最佳答案

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

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>

enter image description here

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

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

第一个解决方案

代码的关键部分:

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

enter image description here

第二种方案

如果你想为每个符号显式设置颜色，你可以使用这个:

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>

enter image description here

关于javascript - 如何更改 D3js 上的符号类型颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30716633/

上一篇：javascript - 在 javascript 中显示的文本中插入换行符

下一篇：javascript - 使用 Underscore.js 对对象进行分组和排序

相关文章：

javascript - IE 版本控制 JScript Html

javascript - CoffeeScript 数组查找下一个位置

javascript - 如何在 SVG/D3 中围绕其质心旋转文本(垂直翻转)？

php - Array to SVG，灵活的PHP算法

javascript - 为 D3 小部件提供滚动条

javascript - 我可以重新使用 html5 canvas 元素的转换吗？

javascript - 使用 ajax 加载时动态内容不起作用

javascript - Canvas 中的 SVG feComposite 过滤器实现

javascript - 使用 d3.js 和 HTML5 Canvas(不是 SVG)的鼠标事件

javascript - 是否可以在 Billboard.js 的图表上显示消息文本？

©2024 IT工具网  联系我们