Гистограмма с накоплением, цветные полосы

У меня есть кодовое поле - https://codepen.io/anon/pen/xpBqxG?editors=1010

Я вношу несколько простых изменений в свои начальные данные, а затем создаю столбчатую диаграмму с накоплением.

В настоящее время я окрашиваю каждую полоску в один цвет, но должно быть два цвета, по одному для каждого ключа в диаграмме с накоплением. Каждую полоску следует раскрасить на два цвета.

Как окрасить каждую часть полосы в один цвет.

.style('fill', (d, i) => {
    return colors[i];
});

d3.js
person ttmt    schedule 22.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Примените style к группам, а не к прямоугольникам:

let layers = layersArea.selectAll('.layer')
    .data(stackedSeries)
    .enter()
    .append('g')
    .attr('class', 'layer')
    .style('fill', (d, i) => {
        return colors[i];
    });

Вот ваш код только с этим изменением:

let keys = [];

let dataToStack = [];
let totalData = [];

let legendKeys = ['usedInf', 'newInf'];

let w = 800;
let h = 450;

let margin = {
  top: 30,
  bottom: 40,
  left: 50,
  right: 20,
};

let width = w - margin.left - margin.right;
let height = h - margin.top - margin.bottom;

let colors = ['#FF9A00', '#FFEBB6', '#FFC400', '#B4EDA0', '#FF4436'];

let data = [{
  "one": 10,
  "two": 12,
  "three": 18,
  "four": 22,
  "five": 30,
  "six": 44,
  "seven": 25,
  "date": "2015-05-31T00:00:00"
}, {
  "one": 30,
  "two": 42,
  "three": 38,
  "four": 62,
  "five": 90,
  "six": 144,
  "seven": 95,
  "date": "2015-06-30T00:00:00"
}, {
  "one": 30,
  "two": 92,
  "three": 18,
  "four": 100,
  "five": 120,
  "six": 10,
  "seven": 110,
  "date": "2015-07-31T00:00:00"
}, ];

for (let i = 0; i < data.length; i++) {
  dataToStack.push({
    date: data[i]['date'].toString(),
    usedInf: data[i]['one'] + data[i]['two'] + data[i]['three'],
    newInf: data[i]['four'] + data[i]['five'] + data[i]['six']
  });
  totalData.push({
    date: data[i]['date'].toString(),
    total: data[i]['seven']
  });
}

let stack = d3.stack()
  .keys(legendKeys);

let stackedSeries = stack(dataToStack);


let x = d3.scaleBand()
  .domain(dataToStack.map(function(d) {
    return d.date;
  }))
  .rangeRound([0, width])
  .padding(0.05);

let y = d3.scaleLinear()
  .domain([0, d3.max(stackedSeries, function(d) {
    return d3.max(d, (d) => {
      return d[1];
    })
  })])
  .range([height, 0]);

let svg = d3.select('.chart').append('svg')
  .attr('class', 'chart')
  .attr('width', w)
  .attr('height', h);

let chart = svg.append('g')
  .classed('graph', true)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

let layersArea = chart.append('g')
  .attr('class', 'layers');

let layers = layersArea.selectAll('.layer').data(stackedSeries)
  .enter()
  .append('g')
  .attr('class', 'layer')
  .style('fill', (d, i) => {

    return colors[i];
  });

layers.selectAll('rect')
  .data((d) => {
    return d
  })

  .enter()
  .append('rect')

  .attr('height', (d, i) => {
    return y(d[0]) - y(d[1]);
  })

  .attr('y', (d) => {
    return y(d[1]);
  })

  .attr('x', (d, i) => {
    return x(d.data.date)
  })

  .attr('width', x.bandwidth());

chart.append('g')
  .classed('x axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

chart.append('g')
  .classed('y axis', true)
  .call(d3.axisLeft(y)
    .ticks(10));
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>

person Gerardo Furtado    schedule 22.01.2018