无法将文本添加到d3水平条

debugcn 发表于 Dev

斯巴达93

我正在使用以下水平条形图（http://bl.ocks.org/juan-cb/ab9a30d0e2ace0d2dc8c），它会根据一些选择进行更新。我正在尝试将标签添加到条形图，以在每个条形图内显示值。不知道我要去哪里错了。我最初有SVG rect元素，我将其归类为“ g”元素，并尝试了这种方法，但仍然没有运气。任何帮助将不胜感激！

JsFiddle- https: //jsfiddle.net/b772s5mg/3/

  datasetTotal = [
        {label:"Category 1", value:19},
        {label:"Category 2", value:5},
        {label:"Category 3", value:13},
        {label:"Category 4", value:17},
        {label:"Category 5", value:21},
        {label:"Category 6", value:25}
    ];

    datasetOption1 = [
        {label:"Category 1", value:22},
        {label:"Category 2", value:33},
        {label:"Category 3", value:4},
        {label:"Category 4", value:15},
        {label:"Category 5", value:36},
        {label:"Category 6", value:0}
    ];

    datasetOption2 = [
        {label:"Category 1", value:10},
        {label:"Category 2", value:20},
        {label:"Category 3", value:30},
        {label:"Category 4", value:5},
        {label:"Category 5", value:12},
        {label:"Category 6", value:23}
    ];

    d3.selectAll("input").on("change", selectDataset);

    function selectDataset()
    {
        var value = this.value;
        if (value == "total")
        {
            change(datasetTotal);
        }
        else if (value == "option1")
        {
            change(datasetOption1);
        }
        else if (value == "option2")
        {
            change(datasetOption2);
        }
    }

    var margin = {top: (parseInt(d3.select('body').style('height'), 10)/20), right: (parseInt(d3.select('body').style('width'), 10)/20), bottom: (parseInt(d3.select('body').style('height'), 10)/20), left: (parseInt(d3.select('body').style('width'), 10)/5)},
            width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right,
            height = parseInt(d3.select('body').style('height'), 10) - margin.top - margin.bottom;

    var div = d3.select("body").append("div").attr("class", "toolTip");

    var formatPercent = d3.format("");

    var y = d3.scale.ordinal()
            .rangeRoundBands([height, 0], .2, 0.5);

    var x = d3.scale.linear()
            .range([0, width]);

    var xAxis = d3.svg.axis()
            .scale(x)
            .tickSize(-height)
            .orient("bottom");

    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");
    //.tickFormat(formatPercent);

    var svg = d3.select("body").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 + ")");

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    d3.select("input[value=\"total\"]").property("checked", true);
    change(datasetTotal);

    function change(dataset) {

        y.domain(dataset.map(function(d) { return d.label; }));
        x.domain([0, d3.max(dataset, function(d) { return d.value; })]);

        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

        svg.select(".y.axis").remove();
        svg.select(".x.axis").remove();

        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(0)")
                .attr("x", 50)
                .attr("dx", ".1em")
                .style("text-anchor", "end")
                .text("Option %");


        var bar = svg.selectAll(".bar")
                .data(dataset, function(d) { return d.label; })
        // new data:
        .enter().append("g").append("rect")
                .attr("class", "bar")
                .attr("x", function(d) { return x(d.value); })
                .attr("y", function(d) { return y(d.label); })
                .attr("width", function(d) { return width-x(d.value); })
                .attr("height", y.rangeBand());

                bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", 30)
    .attr("dy", ".35em")
    .text(function(d) { return d.value; });


        var bars = d3.select("svg").selectAll("g.rects").data(dataset);

        // removed data:
        bars.exit().remove();

        // updated data:
        bars.transition()
                .duration(750)
                .attr("x", function(d) { return 0; })
                .attr("y", function(d) { return y(d.label); })
                .attr("width", function(d) { return x(d.value); })
                .attr("height", y.rangeBand());

    };

杰拉尔多·富塔多（Gerardo Furtado）

您可能会认为您正在将<text>元素添加到<g>（组）元素中，但事实并非如此！

当你这样做的那一刻...

.enter().append("g").append("rect")

...您现在正尝试将text元素追加到<rect>elements上，这将不起作用。

解决方案：中断bars变量：

//appending the <g> elements
var bar = svg.selectAll(".bar")
    .data(dataset, function(d) {
        return d.label;
    })
    .enter().append("g");

//now you append the <rect> to the <g>
bar.append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return x(d.value);
    })
    .attr("y", function(d) {
        return y(d.label);
    })
    .attr("width", function(d) {
        return width - x(d.value);
    })
    .attr("height", y.rangeBand());

//and then you append the <text> to the <g>
bar.append("text")
    .attr("x", function(d) {
        return x(d.value) - 3;
    })
    .attr("text-anchor", "end")
    .attr("y", function(d) {
        return y(d.label) + y.rangeBand() / 2;
    })
    .attr("dy", ".35em")
    .text(function(d) {
        return d.value;
    });

这是您更新的小提琴：https : //jsfiddle.net/v8razxc8/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。