如何使用js/d3为svg颜色使用列值？

5n0oy7gb 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(330)

我搜索了这个，找到了很多关于如何设置比例的信息，但我正试图使用一列中的值为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})

我也尝试过用 "'" 但没有成功。

JavaScript d3.js svg

来源：https://stackoverflow.com/questions/68310654/how-can-i-use-column-values-for-svg-colors-using-js-d3

1条答案

按热度按时间

9jyewag01#

颜色属性不应包含分号：

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); })

赞(0）回复(0）举报 2021-09-23

我来回答

如何使用js/d3为svg颜色使用列值？

1条答案

相关问题

热门标签

最新问答