工具提示显示未定义的值

Question

I am having some issues with tooltips for my bar graph. 我的条形图工具提示出现问题。 For each stopname column, there should be a corresponding value of boarding and alightings shown in the tooltip, however, I am getting undefined values like here 对于每个stopname列，应该有登机，并在提示显示alightings的相应值，但是，我越来越不确定值喜欢这里

Here is my code: 这是我的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: orange;
}

.bar:hover {
  fill: orangered ;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

var margin = {top: 40, right: 20, bottom: 300, left: 40},
    width = 1250 - margin.left - margin.right,
    height = 750 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["orange", "orangered"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Stop:</strong> <span style='color:red'>" + d.stopname + "</span>" + "<br><br><strong>Mean no. of boardings:</strong> <span style='color:red'>" + d.meanboardings + "</span>"+ "<br><br><strong>Mean no. of alightings:</strong> <span style='color:red'>" + d.meanalightings + "</span>";
  })

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.call(tip);

d3.tsv("data.tsv", function(d){
  return {
    stopname: d.stopname,
    meanboardings: +d.meanboardings,
    meanalightings: +d.meanalightings
  };
}, function(error, data) {
  console.log(data);

  var dataset = d3.keys(data[0]).filter(function(key) { return key !== "stopname"
});

  data.forEach(function(d) {
    d.passengers = dataset.map(function(name) { return {name: name, value: +d[name]}; });
  });

  x0.domain(data.map(function(d) { return d.stopname; }));
  x1.domain(dataset).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.passengers, function(d) { return d.value; }); })]);


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", "-.5em")
            .attr("transform", function(d) {
                return "rotate(-90)" 
                });

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Mean no. of boardings and alightings");

  var stopname = svg.selectAll(".stopname")
      .data(data)
    .enter().append("g")
      .attr("class", "stopname")
      .attr("transform", function(d) { return "translate(" + x0(d.stopname) + ",0)"; });

  stopname.selectAll("rect")
      .data(function(d) { return d.passengers; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);


  var legend = svg.selectAll(".legend")
      .data(dataset.slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })

});

function type(d) {
  d.data = +d.data;
  return d;
}

</script>

TSV file: TSV文件：

stopname    maxboardings    meanboardings   minboardings    varboardings    maxalightings   meanalightings  minalightings   varalightings   maxload meanload    minload varload noofbuses
The Boardwalk Terminal (3908)   7   2.571428571 0   6.952380952 0   0   0   0   7   2.571428571 0   6.952380952 7
Highview / Sugar Maple (3329)   2   0.333333333 0   0.666666667 1   0.166666667 0   0.166666667 6   3   0   6.4 6
Highview / Highview Pl (3330)   0   0   0   0   1   0.166666667 0   0.166666667 5   2.833333333 0   5.366666667 6
....

Any help is appreciated, thank you! 任何帮助表示赞赏，谢谢！

Answer 1

You are getting undefined because you are using an undefined value for generating tooltip text. 由于使用不确定的值来生成工具提示文本，因此变得不确定。

In your html function, the data-object associated d you get for every rectangle/bar is of following format: 在html函数中，您为每个矩形/条形图获取的与数据对象关联的d具有以下格式：

{name: "meanlightings", value: <some_value>}

It does not contain the stopname property and will only contain value for one of the fields in the original dataset. 它不包含stopname属性，并且仅包含原始数据集中的字段之一的值。

You will have to rewrite the html callback as 您将必须将html回调重写为

.html(function(d) {
  return "<strong>" + d.name + " :</strong> <span style='color:red'>" + d.value + "</span>";
})

However, if you want to show more properties, you will have to change the data that you are binding to rectangles. 但是，如果要显示更多属性，则必须更改要绑定到矩形的数据。

工具提示显示未定义的值

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-09 00:05:44

工具提示显示未定义的值

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-09 00:05:44

解决方案1
1 已采纳 2016-03-09 00:05:44