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]

...

Barchart image

Answer 1

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

.state('app.user', {
    url: '/users/:userId',
    data: {
        salutation: null
    },
    views: '/to/my/view.html',
    navigation: {
        back_button_state: 'app.results'
    },
    middleware: 'authenticated'
})

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

Answer 2

尝试始终提供一个最小，完整和可验证的示例。 https://stackoverflow.com/help/mcve

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

结果是这样的（演示在这里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})`)

D3.js条形图，条形从顶部延伸到底部，而不是从底部延伸到顶部

2 个答案: