Question

我是d3js的新手，我想在同一个节点上代表两个标签。但是，两个标签都没有显示在图表的节点上。有两个标签：一个是d.name，另一个是d.main.temp，我想同时显示两者。

这是我的代码：

var sortOrder = false;
var sortBars = function () {
    sortOrder = !sortOrder;

    sortItems = function (a, b) {
        if (sortOrder) {
            return a.main.temp - b.main.temp;
        }
        return b.main.temp - a.main.temp;
    };

    svg.selectAll("rect")
    .sort(sortItems)
    .transition()
    .delay(function (d, i) {
        return i * 50;
    })
    .duration(1000)
    .attr("x", function (d, i) {
        return xScale(i);
    });

    //naming the label(temperature value)
    var m = svg.selectAll('text')
    .sort(sortItems)
    .transition();

    m.delay(function (d, i) {
        return i * 50;
    })
    .duration(1000)
    .text(function (d) {
        console.log(d.main.temp);
        return d.main.pressure;
    })
    .attr("text-anchor", "middle")
    .attr("x", function (d, i) {console.log(d.main.pressure);
        return xScale(i) + xScale.rangeBand() / 2;
    })
    .attr("y", function (d) {console.log(d.main.pressure);
        return h - yScale(d.main.temp) + 14;
    });

    m.delay(function (d, i) {
        return i * 50;
    })
    .duration(1000);

    m.text(function (d) {
        //console.log(d.name);
        // console.log(d.main.temp);
        return d.name;
    })
    .attr("text-anchor", "middle")
    .attr("x", function (d, i) {
        return xScale(i) + xScale.rangeBand() / 2;
    })
    .attr("y", function (d) {
        return h - yScale(d.name) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "orange");

// Add the onclick callback to the button
d3.select("#sort").on("click", sortBars);

Answer 1

而不是

return d.name;

使用

return d.name + ' ' + d.main.temp

这将加入标签中的两个字符串

y轴上的两个标签不会一次显示

1 个答案: