D3.js條形圖，條形從上到下，而不是從下到上

Question

條形圖圖像

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 xAxis = d3.axisTop(xScale)和const xAxisG.attr('transform', `translate(0, ${0})`)