D3.js 条形图，条形从上到下延伸，而不是从下到上

Question

Barchart image

D3.js 条形图，条形从上到下延伸，而不是从下到上。

我不确定我应该更改哪些属性来纠正这个问题。 我已经发布了我的代码和结果图表的图像。

...

const marketCataRender = marketCataData => {

    const marketCataSVG = d3.select('.marketCataChart').append('svg')

    marketCataSVG.attr('class', 'marketCataSVG')
        .attr('height', marketCataHeight)
        .attr('width', marketCataWidth);

    // x y values
    const xValue = d => d.loc_start_str;
    const yValue = d => d.total_matched;

    // x y scales
    const xScale = d3.scaleBand()
        .domain(marketCataData.map(xValue))
        .range(\[0, innerWidth\]);

    const yScale = d3.scaleLinear()
        .domain(d3.extent(marketCataData, yValue))
        .range(\[innerHeight, 0\])
        .nice();

    // x y axis
    const xAxis = d3.axisBottom(xScale)
    const yAxis = d3.axisLeft(yScale)

    // set chart group to make it easier to transform
    const g = marketCataSVG.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // x y axis groups
    const xAxisG = g.append('g')
        .call(xAxis)
        .attr('transform', `translate(0, ${innerHeight})`)
        .selectAll('text')
            .style('text-anchor', 'end')
            .attr('transform', `rotate(-90)`)
            .attr('x', -7)
            
            
    const yAxisG = g.append('g')
        .call(yAxis)

    // Apply bar chart rectangle to chart
    const marketCataRect = g.selectAll('rect')
        marketCataRect.data(marketCataData)
        .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('height', d => yScale(yValue(d)))
            .attr('width', xScale.bandwidth());
}][1]

...

Answer 1

您尚未声明矩形的 Y 坐标。 您需要缩放矩形的 y 坐标。

 const marketCataRect = g.selectAll('rect')
    marketCataRect.data(marketCataData)
    .enter().append('rect')
        .attr('x', d => xScale(d.loc_start_str) )

        .attr('y', d => yScale(d.total_matched) ) // set y 
        .attr('height', d => marketCataHeight - yScale(d.total_matched))   // find height by subtracting y value from height of the chart. 

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

此处的示例：https://bl.ocks.org/d3noob/8952219

Answer 2

尽量提供一个最小、完整和可验证的示例。 https://stackoverflow.com/help/mcve

我尝试通过获取您的代码并添加虚拟数据等然后对其进行修改来做到这一点

结果是这样的（Demo here-https://codepen.io/Alexander9111/pen/gObEZym）：

HTML：

<div class="marketCataChart"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>

Javascript：

const marketCataHeight = 800;
const marketCataWidth = 2000;
const innerWidth = 1500;
const innerHeight = 500;

const margin = {
  top: 30,
  left: 30,
  bottom: 30,
  right: 30
};

const marketCataRender = marketCataData => {

    const marketCataSVG = d3.select('.marketCataChart').append('svg')

    marketCataSVG.attr('class', 'marketCataSVG')
        .attr('height', marketCataHeight)
        .attr('width', marketCataWidth);

    // x y values
    const xValue = d => d.loc_start_str;
    const yValue = d => d.total_matched;

    // x y scales
    const xScale = d3.scaleBand();
        xScale.domain(marketCataData.map(xValue))
        .range([0, innerWidth]);

    const yScale = d3.scaleLinear();
        yScale.domain(d3.extent(marketCataData, yValue))
        .range([innerHeight, 0])
        .nice();

    // x y axis
    //const xAxis = d3.axisBottom(xScale)
    const xAxis = d3.axisTop(xScale) //change to axisTop
    const yAxis = d3.axisLeft(yScale)

    // set chart group to make it easier to transform
    const g = marketCataSVG.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // x y axis groups
    const xAxisG = g.append('g')
        .call(xAxis)
        .attr('class', 'x-axis')
        .attr('transform', `translate(0, ${0})`) // no longer need to translate by innerHeight as the x-axis is on the top
        .selectAll('text')
            .style('text-anchor', 'middle')
            .attr('transform', `rotate(-0)`) //-90
            .attr('x', -7)


    const yAxisG = g.append('g')
        .call(yAxis)
        .attr('class', 'y-axis');

    // Apply bar chart rectangle to chart
    const marketCataRect = g.selectAll('rect');
        marketCataRect.data(marketCataData)
        .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('height', d => yScale(yValue(d)))
            .attr('width', xScale.bandwidth());

    //Optional - add chart border:
        g.append('rect')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', innerWidth)
            .attr('height', innerHeight)
            .attr('stroke', 'black')
            .attr('stroke-width', '1px')
            .attr('fill', 'none')
            .attr('class', 'chart-boarder');
};

const marketCataData = [
  {loc_start_str: "example0", total_matched: 0},
  {loc_start_str: "example1", total_matched: 100},
  {loc_start_str: "example2", total_matched: 200},
  {loc_start_str: "example3", total_matched: 300},
  {loc_start_str: "example4", total_matched: 400}, 
]

marketCataRender(marketCataData);

最重要的几行是：const xAxis = d3.axisTop(xScale) 和 const xAxisG.attr('transform', `translate(0, ${0})`)