个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 16:10:08 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： android - 是否可以通过禁用它们的包装布局来禁用所有小部件？
文章推荐： android - 更改android中的颜色亮度
文章推荐： android - 保存和加载对象 Android
文章推荐： mysql - 使用 MySql 工作台中现有列的条件值创建新列？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com