Question

我一直在使用这个库d3 legend。现在我已经设置了比例和颜色比例，我得到了预期的比例，但整个比例的颜色是黑色。Screenshot of the legend.

var color = d3.scaleThreshold()
    .domain([0, 0.4, 0.8, 1.2, 1.6, 2.0, 2.4, 2.8])
    .range(['#c6dbef','#a1c8e4','#7ab4da','#5692c5','#316aac','#08488a','#062c58','#03132b']);

var legend = d3.legendColor()
    .labelFormat(d3.format(".2f"))
    .labels(d3.legendHelpers.thresholdLabels)
    .title("Color Legend")
    .useClass(true)
    .scale(color)

Answer 1

问题是你正在使用useClass(true)。根据{{3}}：

如果将useClass设置为true，则它会将比例的输出作为类应用于形状而不是填充或描边。

解决方案：只需删除它：

var legend = d3.legendColor()
  .labelFormat(d3.format(".2f"))
  .labels(d3.legendHelpers.thresholdLabels)
  .title("Color Legend")
  .scale(color)

以下是您更改的代码：

var svg = d3.select("svg");

svg.append("g")
  .attr("class", "legend")
  .attr("transform", "translate(20,20)");

var color = d3.scaleThreshold()
  .domain([0, 0.4, 0.8, 1.2, 1.6, 2.0, 2.4, 2.8]).range(['#c6dbef', '#a1c8e4', '#7ab4da', '#5692c5', '#316aac', '#08488a', '#062c58', '#03132b']);

var legend = d3.legendColor()
  .labelFormat(d3.format(".2f"))
  .labels(d3.legendHelpers.thresholdLabels)
  .title("Color Legend")
  .scale(color)

svg.select(".legend")
  .call(legend);

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<svg></svg>

D3传奇色始终保持黑色

1 个答案: