时间戳

首页 > 解决方案 > 如何使用 JS/D3 将列值用于 SVG 颜色？

javascript - 如何使用 JS/D3 将列值用于 SVG 颜色？

问题描述

我搜索了这个并找到了很多关于如何设置比例的信息，但我正在尝试使用填充了十六进制值的列中的值对在 D3 中创建的单个 SVG 进行着色。在下面的代码中，“Color1”是填充了不同十六进制颜色值的列，例如#000000；

以下是我尝试过的对我来说很直观但不起作用的方法，而是将图表填充为黑色：

  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
    .append('circle')
      .attr('cx',function (d) { return xScale(d.xvalue) })
      .attr('cy',function (d) { return yScale(d.yvalue) })
      .attr('r','3')
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill', function (d) {return d.Color1})

我也尝试过使用该功能，"'"但没有成功。

标签： javascriptsvgd3.js

解决方案

color 属性不应包含分号：

var data = [
  {Color1: "#aaaaaa;"}, 
  {Color1: "#aaaaaa"}
]

var svg = d3.select("body").append("svg");

var circles = svg.selectAll('circle')
   .data(data)
    .enter()
    .append('circle')
      .attr('cx',(d,i)=>i*100+50)
      .attr('cy', 100)
      .attr('r','10')
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill', function(d) { return d.Color1; })
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如果您在数据中硬编码了分号，则可以将最后一个字符切掉：

.attr("fill", function(d) { return d.Color1.slice(0,-1); })

推荐阅读