Блог

Главная - Вопросы по программированию - Как указать цвета для легенды

Как указать цвета для легенды

#javascript #html #css #d3.js

#javascript #HTML #css #d3.js

Вопрос:

Эта диаграмма, которую я использую, автоматически присваивает цвета созданной мной легенде, но что делать, если я хочу указать, какие цвета должны быть частью определенного ключа или значения. Например, A должен быть зеленым, а B — оранжевым.

 // select the svg area
var SVG = d3.select("#my_dataviz4")

// create a list of keys
var keys = ["A", "B", "C", "D"]

// Usually you have a color scale in your chart already
var color = d3.scaleOrdinal()
  .domain(keys)
  .range(d3.schemeSet1);

//var color = ["yellow", "red", "blue", "green"]

// Add one dot in the legend for each name.
var size = 20
SVG.selectAll("mydots")
  .data(keys)
  .enter()
  .append("rect")
  .attr("x", 100)
  .attr("y", function(d, i) {
    return 100   i * (size   5)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .attr("width", size)
  .attr("height", size)
  .style("fill", function(d) {
    return color(d)
  })

// Add one dot in the legend for each name.
SVG.selectAll("mylabels")
  .data(keys)
  .enter()
  .append("text")
  .attr("x", 100   size * 1.2)
  .attr("y", function(d, i) {
    return 100   i * (size   5)   (size / 2)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .style("fill", function(d) {
    return color(d)
  })
  .text(function(d) {
    return d
  })
  .attr("text-anchor", "left")
  .style("alignment-baseline", "middle") 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<svg id="my_dataviz4" width="550" height="500"></svg>

Ответ №1:

  1. Вы можете либо переопределить схему: 
     d3.schemeSet1 = [ 'green', 'orange', 'cyan', 'purple' ];
  2. Или вы можете передать свой собственный массив: 
     var customPalette = [ 'green', 'orange', 'cyan', 'purple' ];

var color = d3.scaleOrdinal()
  .domain(keys)
  .range(customPalette);

Демонстрация первого метода

 // Override the scheme?
d3.schemeSet1 = [ 'green', 'orange', 'cyan', 'purple' ];

// select the svg area
var SVG = d3.select("#my_dataviz4")

// create a list of keys
var keys = ["A", "B", "C", "D"]

// Usually you have a color scale in your chart already
var color = d3.scaleOrdinal()
  .domain(keys)
  .range(d3.schemeSet1); // !! Or pass yourn own array !!

//var color = ["yellow", "red", "blue", "green"]

// Add one dot in the legend for each name.
var size = 20
SVG.selectAll("mydots")
  .data(keys)
  .enter()
  .append("rect")
  .attr("x", 100)
  .attr("y", function(d, i) {
    return 100   i * (size   5)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .attr("width", size)
  .attr("height", size)
  .style("fill", function(d) {
    return color(d)
  })

// Add one dot in the legend for each name.
SVG.selectAll("mylabels")
  .data(keys)
  .enter()
  .append("text")
  .attr("x", 100   size * 1.2)
  .attr("y", function(d, i) {
    return 100   i * (size   5)   (size / 2)
  }) // 100 is where the first dot appears. 25 is the distance between dots
  .style("fill", function(d) {
    return color(d)
  })
  .text(function(d) {
    return d
  })
  .attr("text-anchor", "left")
  .style("alignment-baseline", "middle") 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<svg id="my_dataviz4" width="550" height="500"></svg>