Столбчатая диаграмма D3 с переменными X и Y (переменная ширина и высота для стержней) - PullRequest
Новая
       7

Столбчатая диаграмма D3 с переменными X и Y (переменная ширина и высота для стержней)

0 голосов
/ 11 февраля 2019

Я пытаюсь нарисовать гистограмму, которая будет иметь переменную ширину (на основе поля «Вес» в json) и высоту (на основе поля частоты в json) для баров на основе данных json.

В настоящее время яЯ получаю некоторый результат, но между барами есть некоторый разрыв.Кажется, я делаю вычисления для X или Width неправильно.

Может ли кто-нибудь указать мне правильное направление?

https://imgur.com/a/KyG2Aql

Данные выглядят как показано ниже. 

var data = [{
        "letter": "A",
        "Weight": 10,
        "frequency": 60,
        "xPos": 2.5
    },
    {
        "letter": "B",
        "Weight": 10,
        "frequency": 25,
        "xPos": 15
    },
    {
        "letter": "C",
        "Weight": 20,
        "frequency": 55,
        "xPos": 40
    }
];

У меня есть кодекс для того же самого ниже.

https://codepen.io/poorJSDev/pen/vbReOm

1 Ответ

0 голосов
/ 11 февраля 2019

Поскольку вам необходимо знать как текущий вес записи (для ширины), так и сумму весов всех предыдущих записей (для смещения), круговая разметка выглядит неожиданно прилично подходящей для задачи (поскольку онаобеспечивает начальный и конечный углы для срезов).Все, что вам нужно сделать, это сопоставить угол с шириной. 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 500)
      .attr("height", 200)

    var data = [{
      freq: 60,
      weight: 10
    }, {
      freq: 25,
      weight: 10
    }, {
      freq: 55,
      weight: 20
    }];
    
    var xScale = d3.scaleLinear()
    	.domain([0, Math.PI * 2])
    	.range([0, 500]);
    
    var yScale = d3.scaleLinear()
    	.domain([0, 80])
    	.range([200, 0]);
    
    var pie = d3.pie()
    	.sortValues(null)
    	.value(function(d){ return d.weight; });
    var adjustedData = pie(data);
    
    var rects = svg.selectAll('rect')
    	.data(adjustedData);
    
    rects.enter()
    	.append('rect')
    	.style('fill', 'blue')
    	.style('stroke', 'black')
    .merge(rects)
    	.attr('x', function(d) { return xScale(d.startAngle); })
    	.attr('width', function(d) { return xScale(d.endAngle) - xScale(d.startAngle); })
    	.attr('y', function(d) { return yScale(d.data.freq); })
    	.attr('height', function(d) { return yScale(0) - yScale(d.data.freq); });
    
  </script>
</body>
...