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

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

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

---

您尚未声明矩形的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());

---

这里的例子：

尽量提供一个最小的、完整的、可验证的例子

我试图通过获取您的代码、添加虚拟数据等，然后对其进行修改来实现这一点

结果是（此处演示-）：

HTML:

---

最重要的行是：

constxaxis=d3.axisTop（xScale）

和

constxaxisg.attr（'transform'，'translate（0，${0}）`

嗨，我的答案解决了你的问题了吗？嗨，下面我的答案是什么？

 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());

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

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);