Масштаб гистограммы d3, перевернутый по оси Y, не похож на проблему classi c, почему она действует странно? - PullRequest
Новая
       34

Масштаб гистограммы d3, перевернутый по оси Y, не похож на проблему classi c, почему она действует странно?

0 голосов
/ 05 мая 2020

Рисование гистограммы в d3 (вертикальная гистограмма) работает нормально, за исключением того, что масштаб оси Y перевернут. Вот код, который (почти) работает: 

let maxFrequency = d3.max(histData, d=> d.length); 
let yScale = d3.scaleLinear()
    .range([0,config.height - config.margin.top - config.margin.bottom])
    .domain([0,maxFrequency]);  //<-- this is wrong, right? It should be [maxFrequency,0]

let xScale = d3.scaleBand()
    .range([0, (config.width - config.margin.left - config.margin.right)])
    .domain(histData.map(d => d.Name))
    .padding(0.2);
//Draw the histogram bars
let bars = config.svgContainer.selectAll("rect")
    .data(histData);
bars.enter()
    .append("rect")
    .attr("width", xScale.bandwidth())
    .attr("height", (d)=> yScale(d.length))
    .attr("x", (d) => xScale(d.Name) + config.margin.left)
    .attr("y", (d)=> config.height - config.margin.bottom - yScale(d.length))
    .attr("fill", "red");//"#2a5599");
let axisX = d3.axisBottom(xScale)
config.svgContainer.append("g")
    .style("transform", `translate(${config.margin.left}px,${config.height - 
config.margin.bottom}px)`)
    .call(axisX)
let axisY = d3.axisLeft(yScale)
config.svgContainer.append("g")
    .style('transform',`translate(${config.margin.left}px,${config.margin.top}px)`)
    .call(axisY);

Этот код создает этот график.

введите описание изображения здесь

Обычно вам нужно чтобы изменить порядок атрибута домена для оси Y. Вот график, когда я использую код «.domain ([maxFrequency, 0])» без каких-либо других изменений.

введите здесь описание изображения

Вы можете увидеть что ось Y теперь правильная, но столбцы выглядят шатко. При ближайшем рассмотрении вы можете увидеть, что данные (1,9,40,80) все еще представлены, но полосы теперь перевернуты. Высота стержней теперь 79 (80-1), 71 (80-9), 40 (80-40) и 0 (80-80).

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

...