Блог

Главная - Вопросы по программированию - d3 — Столбчатая диаграмма, перекрывающая мой текст, как я могу уменьшить домен, чтобы этого не произошло?

d3 — Столбчатая диаграмма, перекрывающая мой текст, как я могу уменьшить домен, чтобы этого не произошло?

#d3.js

#d3.js

Вопрос:

 const bar3 = d3.select('#bar3').append('svg').attr('width', 800).attr('height', 225);


var bar1Data = [{
    position: 1,
    label: '70k',
    value: 100
  },
  {
    position: 2,
    label: '71K - 149K',
    value: 200
  },
  {
    position: 3,
    label: '71K - 149K',
    value: 300
  },
  {
    position: 4,
    label: '71K - 149K',
    value: 100
  },
];

var colorScale = d3.scaleOrdinal()
  .range(["#FFC828", "#FFAC27", '#FF8F26', '#FF7125']);

const max = d3.sum(bar1Data, d => d.value)
console.log(max)

const maximum = d3.scaleLinear()
  .domain([0, d3.max(bar1Data, d => d.value)])
  .range([200, 0])



//Join data to rects

const rects = bar3.selectAll('rect')
  .data(bar1Data)

rects
  .attr('width', 196)
  .attr('height', d => 225 - maximum(d.value))
  .attr('x', 20)
  .attr('y', 0)

rects.enter()
  .append('rect')
  .attr('width', 196)
  .attr('height', d => 225 - maximum(d.value))
  .attr('x', (d, i) => i * 199)
  .attr('y', d => maximum(d.value))
  .style("fill", (d, i) => colorScale(i));

function sum(array, start, end) {
  var total = 0;
  for (var i = start; i < end; i  ) total  = array[i];
  return total;
}


bar3.append("text")
  .attr("x", (400))
  .attr("y", 80)
  .attr("text-anchor", "middle")
  .style('font-family', 'marsBook')
  .style("font-size", "24px")
  .text("Generation of Head of Household")  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="bars">
  <div id="bar3"></div>
</div>

Привет,

Я изо всех сил пытаюсь сделать так, чтобы моя столбчатая диаграмма была ниже текстового поля. Я не уверен, что я сделал, но диаграмма продолжает перекрывать заголовок, и я бы хотел, чтобы этого не было. Предпочтительно сохранить все вещи в #bar3 контейнере и уменьшить домен. Но, похоже, у меня это не сработало.

Ответ №1:

Вам нужно изменить не домен (который представляет собой набор значений, которые могут принимать данные), а диапазон. В частности, 200 в maximum обозначает 200 пикселей сверху и 0 обозначает самый верх. Итак, изменение, которое исправляет это:

 const bar3 = d3.select('#bar3').append('svg').attr('width', 800).attr('height', 225);


var bar1Data = [{
    position: 1,
    label: '70k',
    value: 100
  },
  {
    position: 2,
    label: '71K - 149K',
    value: 200
  },
  {
    position: 3,
    label: '71K - 149K',
    value: 300
  },
  {
    position: 4,
    label: '71K - 149K',
    value: 100
  },
];

var colorScale = d3.scaleOrdinal()
  .range(["#FFC828", "#FFAC27", '#FF8F26', '#FF7125']);

const max = d3.sum(bar1Data, d => d.value)
console.log(max)

const maximum = d3.scaleLinear()
  .domain([0, d3.max(bar1Data, d => d.value)])
  .range([200, 50])

//Join data to rects

const rects = bar3.selectAll('rect')
  .data(bar1Data)

rects
  .attr('width', 196)
  .attr('height', d => 225 - maximum(d.value))
  .attr('x', 20)
  .attr('y', 0)

rects.enter()
  .append('rect')
  .attr('width', 196)
  .attr('height', d => 225 - maximum(d.value))
  .attr('x', (d, i) => i * 199)
  .attr('y', d => maximum(d.value))
  .style("fill", (d, i) => colorScale(i));

function sum(array, start, end) {
  var total = 0;
  for (var i = start; i < end; i  ) total  = array[i];
  return total;
}

bar3.append("text")
  .attr("x", 400)
  .attr("y", 40)
  .attr("text-anchor", "middle")
  .style('font-family', 'marsBook')
  .style("font-size", "24px")
  .text("Generation of Head of Household")  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="bars">
  <div id="bar3"></div>
</div>

Другой вариант — нанести столбцы не непосредственно на svg , а вместо этого использовать g дочерний элемент и оставить ему некоторое поле вверху:

 const barContainer = bar3.append('g').attr('transform', 'translate(20, 40)');

А затем добавьте столбики в barContainer, а текст — в svg. Это позволяет вам снова использовать 0 в диапазоне.