分组条形图d3js中的文本标签错误

Question

我是d3js的新手，不知道为什么栏里的所有标签都是错误的。

我的代码和截图如下图，你可以看到所有的标签都和我的数据不一样。

有人知道我的文本标签部分发生了什么吗？

//设置图表的尺寸和边距

var margin = { top: 10, right: 30, bottom: 40, left: 50 },
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

const dataUrl = "https://raw.githubusercontent.com/yushinglui/IV/main/time_distance_status_v2.csv"

//fetch the data
d3.csv(dataUrl)
    .then((data) => {

        // append the svg object to the body of the page
        var svg = d3.select("#graph-2")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")")



        // List of subgroups = header of the csv files = soil condition here
        var subgroups = data.columns.slice(1)

        // List of groups = species here = value of the first column called group -> I show them on the X axis
        var groups = d3.map(data, function (d) { return (d.startTime) })

        // Add X axis
        var x = d3.scaleBand()
            .domain(groups)
            .range([0, width])
            .padding([0.2])
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x).tickSize(0));

        // Add Y axis
        var y = d3.scaleLinear()
            .domain([0, 20])
            .range([height, 0]);
        svg.append("g")
            .call(d3.axisLeft(y));

        // Another scale for subgroup position?
        var xSubgroup = d3.scaleBand()
            .domain(subgroups)
            .range([0, x.bandwidth()])
            .padding([0.05])

        // color palette = one color per subgroup
        var color = d3.scaleOrdinal()
            .domain(subgroups)
            .range(['#98abc5', '#8a89a6'])



        // Show the bars
        svg.append("g")
            .selectAll("g")

            // Enter in data = loop group per group
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d) { return "translate(" + x(d.startTime) + ",0)"; })

            .selectAll("rect")
            .data(function (d) { return subgroups.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter()
            .append("rect")
            .attr("x", function (d) { return xSubgroup(d.key); })
            .attr("y", function (d) { return y(d.value); })
            .attr("width", xSubgroup.bandwidth())
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return color(d.key); })

            // mouseover and mouseout animation
            .on("mouseover", function (d) {
                d3.select(this).style("fill", d3.rgb(color(d.key)).darker(2))
            })
            .on("mouseout", function (d) {
                d3.select(this).style("fill", function (d) { return color(d.key); })
            })





        //axis labels
        svg.append('text')
            .attr('x', - (height / 2))
            .attr('y', width - 650)
            .attr('transform', 'rotate(-90)')
            .attr('text-anchor', 'middle')
            .style("font-size", "17px")
            .text('Average Distance');

        svg.append('text')
            .attr('x', 300)
            .attr('y', width - 240)
            .attr('transform', 'rotate()')
            .attr('text-anchor', 'middle')
            .style("font-size", "17px")
            .text('Start Time');

        // legend
        svg.append("circle").attr("cx", 200).attr("cy", 20).attr("r", 6).style("fill", "#98abc5")
        svg.append("circle").attr("cx", 300).attr("cy", 20).attr("r", 6).style("fill", "#8a89a6")
        svg.append("text").attr("x", 220).attr("y", 20).text("Present").style("font-size", "15px").attr("alignment-baseline", "middle")
        svg.append("text").attr("x", 320).attr("y", 20).text("Absent").style("font-size", "15px").attr("alignment-baseline", "middle")


        //text labels on bars -- all labels wrong!!

        svg.append("g")
            .selectAll("g")

            // Enter in data = loop group per group
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d) { return "translate(" + x(d.startTime) + ",0)"; })

            .selectAll("text")
            .data(function (d) { return subgroups.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter()
            .append("text")
            .text(function (d) { return y(d.value); })

            .attr("font-family", "sans-serif")
            .attr("font-size", "12px")
            .attr("fill", "black")
            .attr("text-anchor", "middle")

            .attr("x", function (d) { return xSubgroup(d.key); })
            .attr("y", function (d) { return y(d.value) + 10; })

    });

我的参考网站：

http://plnkr.co/edit/9lAiAXwet1bCOYL58lWN?p=preview&preview

https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad

Answer 1

您的问题是，当您附加文本时，您无意中调用了 y 函数，该函数用于获取插入文本的 y 位置。您得到的数字实际上是 y 位置值，看起来完全随机。

.text(function (d) { return y(d.value); }) // here is the issue

改成

.text(function (d) { return d.value; })

它应该可以工作！