如何在水平堆积条形图中显示条形值

Question

我是 D3 的新手，开发了一个水平堆叠条形图，但面临着在条形图右角显示条形值的问题。var group = ["field2", "field3"];var mainDiv = "#charts";var mainDivName = "charts";var axisBottom;var axisLeft;var dealsData = [{        field1: "company-1",        field2: 500.0,        field3: 400.0,    },    {        field1: "company-2",        field2: 200.0,        field3: 700.0,    },    {        field1: "company-3",        field2: 113.2,        field3: 850.0,    },    {        field1: "company-4",        field2: 140.4,        field3: 83.0,    },    {        field1: "company-5",        field2: 75.5,        field3: 27.5,    },    {        field1: "company-6",        field2: 140.0,        field3: 440.0,    },    {        field1: "company-6",        field2: 79.5,        field3: 107.5,    },];var layers = d3.stack().keys(group).offset(d3.stackOffsetDiverging)(    dealsData);var svg = d3.select("svg"),    margin = {        top: 20,        right: 30,        bottom: 50,        left: 80,    },    width = +svg.attr("width"),    height = +svg.attr("height");var x = d3.scaleLinear().rangeRound([margin.left, width - margin.right]);x.domain([d3.min(layers, stackMin), d3.max(layers, stackMax)]);var y = d3    .scaleBand()    .rangeRound([height - margin.bottom, margin.top])    .padding(0.5);y.domain(    dealsData.map(function(d) {        return d.field1;    }));function stackMin(layers) {    return d3.min(layers, function(d) {        return d[0];    });}function stackMax(layers) {    return d3.max(layers, function(d) {        return d[1];    });}假设公司 1 的数据为500.0和400.0，那么我们需要在栏的末尾显示500/400 。条形值未出现，如何在条形图的右角显示相应渲染的条形值。

Answer 1

不可能将 a 附加text到rect元素上，它们不应该有子元素。您可以只绘制另一个g节点，并使用最后一组条形图中的数据。数据包含您需要的一切 - 他们知道最高柱的值，因此他们知道偏移量，并且他们的属性x中也有数据：d.data

var group = ["field2", "field3"];

var mainDiv = "#charts";

var mainDivName = "charts";

var axisBottom;

var axisLeft;

var dealsData = [{

        field1: "company-1",

        field2: 500.0,

        field3: 400.0,

    },

    {

        field1: "company-2",

        field2: 200.0,

        field3: 700.0,

    },

    {

        field1: "company-3",

        field2: 113.2,

        field3: 850.0,

    },

    {

        field1: "company-4",

        field2: 140.4,

        field3: 83.0,

    },

    {

        field1: "company-5",

        field2: 75.5,

        field3: 27.5,

    },

    {

        field1: "company-6",

        field2: 140.0,

        field3: 440.0,

    },

    {

        field1: "company-6",

        field2: 79.5,

        field3: 107.5,

    },

];

var layers = d3.stack().keys(group).offset(d3.stackOffsetDiverging)(

    dealsData

);

var svg = d3.select("svg"),

    margin = {

        top: 20,

        right: 30,

        bottom: 50,

        left: 80,

    },

    width = +svg.attr("width"),

    height = +svg.attr("height");

var x = d3.scaleLinear().rangeRound([margin.left, width - margin.right]);

x.domain([d3.min(layers, stackMin), d3.max(layers, stackMax)]);

var y = d3

    .scaleBand()

    .rangeRound([height - margin.bottom, margin.top])

    .padding(0.5);

y.domain(

    dealsData.map(function(d) {

        return d.field1;

    })

);

function stackMin(layers) {

    return d3.min(layers, function(d) {

        return d[0];

    });

}

function stackMax(layers) {

    return d3.max(layers, function(d) {

        return d[1];

    });

}

this.axisBottom = d3.axisBottom(x).tickSize(-430);

var colors = ["#00FF00", "#FF0000"];

var eleX = svg

    .append("g")

    .attr("transform", "translate(0," + (height - margin.bottom) + ")")

    .call(this.axisBottom);

eleX

    .append("text")

    .attr("x", width / 2)

    .attr("y", margin.bottom * 1)

    .attr("dx", "0.32em")

    .attr("fill", "#000")

    .attr("font-weight", "bold")

    .attr("text-anchor", "start")

    .text(" x- axis");

eleX

    .selectAll("line")

    .style("stroke-width", "0.6")

    .style("opacity", "0.25")

    .style("stroke", "#adadad");

eleX

    .selectAll("path")

    .style("stroke-width", "1")

    .style("opacity", "0")

    .style("stroke", "#adadad");

var bw = y.bandwidth;

console.log('bw', bw);

console.log("bandwidth::", bw);

var ele = svg

    .append("g")

    .attr("transform", "translate(" + margin.left + ",0)")

    .call(d3.axisLeft(y));

ele

    .selectAll("text")

    .attr("text-anchor", "start")

    .attr("dx", "15px")

    .attr("dy", y.bandwidth)

    .style("font", "Source Sans Pro Regular")

    .style("fill", "#6C6F78");

ele

    .selectAll("rect")

    .attr("text-anchor", "start")

    .attr("dx", "288px")

    .attr("dy", "-15px");

ele

    .append("text")

    .attr("transform", "rotate(-90)")

    .attr("x", 0 - height / 2)

    .attr("y", 60 - margin.left)

    .attr("dy", "0.32em")

    .attr("fill", "#000")

    .attr("font-weight", "bold")

    .attr("text-anchor", "middle")

    .text(" y-axis");

ele.selectAll("line").style("stroke-width", "1").style("opacity", "1");

//.style('stroke-dasharray', '2,2');

ele.selectAll("path").attr("opacity", "0");

var maing = svg.append("g").selectAll("g").data(layers);

var g = maing

    .enter()

    .append("g")

    .attr("fill", function(d, i) {

        return colors[i];

    });

var bars = g

    .selectAll("rect")

    .data(function(d) {

        d.forEach(function(d1) {

            d1.key = d.key;

            return d1;

        });

        return d;

    })

    .enter()

    .append("rect")

    .attr("data", function(d) {

        var data = {};

        data["key"] = d.key;

        data["value"] = d.data[d.key];

        data["name"] = d.data.field1;

        var total = 0;

        group.map(function(d1) {

            total = total + d.data[d1];

        });

        data["total"] = total;

        console.log("tooltip", data);

        return JSON.stringify(data);

    })

    .attr("width", function(d) {

        return x(d[1]) - x(d[0]);

    })

    .attr("x", function(d) {

        return x(d[0]);

    })

    .attr("y", function(d) {

        return y(d.data.field1);

    })

    .attr("height", y.bandwidth)

    .attr("rx", 2)

    .attr("ry", 2);

svg.append("g")

  .attr("class", "labels")

  .selectAll("text")

  .data(layers[layers.length - 1]) // this has all the information we need

  .enter()

  .append("text")

  .attr("x", function(d) {

      return x(d[1]) + 10;

  })

  .attr("y", function(d) {

      return y(d.data.field1) + y.bandwidth() / 2;

  })

  .attr("dominant-baseline", "central")

  .text(function(d) {

    return d.data.field1 + " / " + d.data.field2;

  });

<div id="charts">

  <svg width="710" height="500"></svg>

</div>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3- 

tip.min.js"></script>

请注意，存在一些问题，即条形被绘制在错误的位置或看起来被绘制了两次。这是您的图表中预先存在的问题，现在更加清晰，因为这意味着还绘制了额外的标签。