Question

我要求在三角形块内显示数据（TEXT）。但是数据（TEXT）应该包含在triange的块内。请参阅下图以了解清楚。

图像显示文本数据显示在每个块之外，应该正确混合三角形的各个块

Click this link to see the image ,what image showing is , text data is displaying outside of the every block, that should be properly blended respective blocks of the triangle

var svg = d3.select("#" + instanceData.id).insert("svg")
    .attr("id", instanceData.id + "svg")
    .attr("width", w)
    .attr("height", h)
    .append("g");


var data = series0;
var pyramid = d3.pyramid()
    .size([w, h])
    .value(function(d) {
        return d.population;
    });

var line = d3.svg.line()
    .interpolate('linear-closed')
    .x(function(d, i) {
        return d.x;
    })
    .y(function(d, i) {
        return d.y;
    });

var g = svg.selectAll(".pyramid-group")
    .data(pyramid(data))
    .enter().append("g")
    .attr("class", "pyramid-group");

g.append("path").attr({
    "d": function(d) {

        return line(d.coordinates);

    },
    "fill": function(d) {
        /* console.log("test "+incr);
        if(incr==0){
        colorCode="rgb(255,0,0)";
        }else if(incr==1){
        colorCode="rgb(255,255,0)";
        }else if(incr==2){
        colorCode="rgb(0,128,0)";
        } */
        incr++;
        return color(d.region);

    }
});

g.append("text")
    .attr({
        "y": function(d, i) {
            if (d.coordinates.length === 4) {
                return (((d.coordinates[0].y - d.coordinates[1].y) / 2) + d.coordinates[1].y) + 5;
            } else {
                return (d.coordinates[0].y + d.coordinates[1].y) / 2 + 10;
            }
        },
        "x": function(d, i) {
            return w / 2;
        }
    })
    .style("text-anchor", "middle")
    .text(function(d) {
        return d.region;
    });

Answer 1

使用此

<html> <meta charset="utf-8"> <script src="//d3plus.org/js/d3.js"></script> <script src="//d3plus.org/js/d3plus.js"></script> <style> svg { font-family: "Helvetica", "Arial", sans-serif; height: 425px; margin: 25px; width: 900px; } .type { fill: #888; text-anchor: middle; } .shape { fill: #eee; stroke: #ccc; } </style> <svg> <!-- Text that will use the D3plus default wrapping. --> <text class="type" dy="15px" x="75px">Wrapped</text> <rect class="shape" height="150px" width="150px" y="50px"></rect> <text id="rectWrap" class="wrap" y="50px" font-size="12"> Here is a long text string that SVG should wrap by default, but it does not. </text> <circle class="shape" r="75px" cx="75px" cy="300px"></circle> <text id="circleWrap" class="wrap" y="225px" x="0px" font-size="12"> Here is a long text string that SVG should wrap by default, but it does not. </text> <!-- Text that D3plus will resize to fit the available space. --> <text class="type" dy="15px" x="275px">Resized</text> <rect class="shape" height="150px" width="150px" y="50px" x="200px"></rect> <text id="rectResize" class="wrap" y="50px" x="200px" font-size="12"> Here is a long text string that SVG should wrap by default, but it does not. </text> <circle class="shape" r="75px" cx="275px" cy="300px"></circle> <text id="circleResize" class="wrap" y="225px" x="200px" font-size="12"> Here is a long text string that SVG should wrap by default, but it does not. </text> <!-- For comparison, how SVG would display the text without D3plus. --> <text class="type" dy="15px" x="475px">Default Behavior</text> <rect class="shape" height="150px" width="150px" y="50px" x="400px"></rect> <text class="wrap" y="50px" x="400px" font-size="12"> Here is a long text string that SVG should wrap by default, but it does not. </text> <circle class="shape" r="75px" cx="475px" cy="300px"></circle> <text class="wrap" y="225px" x="400px" font-size="12"> Here is a long text string that SVG should wrap by default, but it does not. </text> </svg> <script> // Wrap text in a rectangle. d3plus.textwrap() .container(d3.select("#rectWrap")) .draw(); // Wrap text in a rectangle, and size the text to fit. d3plus.textwrap() .container(d3.select("#rectResize")) .resize(true) .draw(); // Wrap text in a circle. d3plus.textwrap() .container(d3.select("#circleWrap")) .draw(); // Wrap text in a circle, and size the text to fit. d3plus.textwrap() .container(d3.select("#circleResize")) .resize(true) .draw(); </script>

在三角形SVG中包装文本

1 个答案: