Question

我使用的是d3.js v4，难以在水平条形图上显示值，鼠标滑过鼠标并弹出以显示数据所需的值

请找到我使用的以下代码

            var data = [{Issue:"Other",Number:808,Stage:"A"},
{Issue:"Other1",Number:80,Stage:"A"},
{Issue:"Other2",Number:8,Stage:"A"},
{Issue:"Other3",Number:67,Stage:"A"},
{Issue:"Other4",Number:45,Stage:"A"},
{Issue:"Other5",Number:9,Stage:"A"},
{Issue:"Other6",Number:60,Stage:"A"},
{Issue:"Other7",Number:8,Stage:"A"}];


var margin = {top: 15, right: 30, bottom: 40, left: 400},
    width = 1200 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

    var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.1);

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

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

data.forEach(function(d) {
    d.Number = +d.Number;
  });

x.domain([0, d3.max(data, function(d){ return d.Number; })])
y.domain(data.map(function(d) { return d.Issue; }));

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("width", function(d) {return x(d.Number); } )
.attr("y", function(d) { return y(d.Issue); })
.style("fill",function(d) { 
    if(d.Stage=='I')
    return '#3dc778'
    if(d.Stage=='B')
        return '#e52929'
        if(d.Stage=='U')
            return '#3021fd'
            if(d.Stage=='A')
                return '#eefd21'
 })
.attr("height", y.bandwidth());

// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));

我们如何向上述代码段的每个条形图和鼠标悬停和鼠标移出功能发送文字？

由于普拉萨德

Answer 1

根据请求更新：

＆＃13;

var data = [{
    Issue: "Other",
    Number: 808,
    Stage: "A"
  },
  {
    Issue: "Other1",
    Number: 80,
    Stage: "A"
  },
  {
    Issue: "Other2",
    Number: 8,
    Stage: "A"
  },
  {
    Issue: "Other3",
    Number: 67,
    Stage: "A"
  },
  {
    Issue: "Other4",
    Number: 45,
    Stage: "A"
  },
  {
    Issue: "Other5",
    Number: 9,
    Stage: "A"
  },
  {
    Issue: "Other6",
    Number: 60,
    Stage: "A"
  },
  {
    Issue: "Other7",
    Number: 8,
    Stage: "A"
  }
];


var margin = {
    top: 15,
    right: 30,
    bottom: 40,
    left: 400
  },
  width = 1200 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

var y = d3.scaleBand()
  .range([height, 0])
  .padding(0.1);

var x = d3.scaleLinear()
  .range([0, width]);

var svg = d3.select("#barchart").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 + ")");

data.forEach(function(d) {
  d.Number = +d.Number;
});

x.domain([0, d3.max(data, function(d) {
  return d.Number;
})])
y.domain(data.map(function(d) {
  return d.Issue;
}));

svg.selectAll(".bar")
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'group')
  .append("rect")
  .attr("width", function(d) {
    return x(d.Number);
  })
  .attr("y", function(d) {
    return y(d.Issue);
  })
  .style("fill", function(d) {
    if (d.Stage == 'I')
      return '#3dc778'
    if (d.Stage == 'B')
      return '#e52929'
    if (d.Stage == 'U')
      return '#3021fd'
    if (d.Stage == 'A')
      return '#eefd21'
  })
  .on("mouseover", d => mouseover(d))
  .on("mousemove", mousemove)
  .on("mouseout", mouseout)
  .attr("height", y.bandwidth());

svg.selectAll(".group")
  .append('text')
  .attr('class', 'count')
  .text(d => d.Number)
  .attr("x", function(d) {
    return x(d.Number) + 5;
  })
  .attr("y", function(d) {
    return y(d.Issue) + y.bandwidth() / 2 + 5;
  })

// add the x Axis
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
  .call(d3.axisLeft(y));

var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("display", "none");

function mouseover(d) {
  div.style("display", "inline");
  div.text(d.Stage)
}

function mousemove() {
  div
    .style("left", (d3.event.pageX - 34) + "px")
    .style("top", (d3.event.pageY - 12) + "px");
}

function mouseout() {
  div.style("display", "none");
}

＆＃13;

.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  margin-top: -20px;
  font: 10px sans-serif;
  background: #ddd;
  pointer-events: none;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>

<body>
  <div id='barchart'></div>
</body>

＆＃13;

工具提示从这里无耻地被盗： https://bl.ocks.org/mbostock/1087001

文字＆amp;鼠标悬停在d3.js中的条形图上的鼠标输出值

1 个答案: