Question

我知道可以在D3工具提示中显示图像。我想要做的是在工具提示中显示条形图（即当鼠标悬停在对象上时，条形图出现）。我修改了http://bl.ocks.org/jarobertson/1483052#gistfile1.html的代码，并将其与Robert Lewand的条形图代码相结合。好吧，它不起作用。我甚至不会在控制台中出现任何可能让我走上正确道路的错误。有可能吗？这是我的代码：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

div.tooltip {
  position: absolute;
  text-align: center;
  width: 500px;
  height: 550px;
  padding: 8px;
  font: 10px sans-serif;
  background: #ddd;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500;

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

svg.append("svg:g")
    .attr("transform", "translate(480,50)rotate(60)scale(2)")
  .append("svg:rect")
    .attr("width", 140)
    .attr("height", 140)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 1e-6);

function mouseover() {
  div.transition()
      .duration(500)
      .style("opacity", 1);
}

// where the tooltip previosly contained an image
function mousemove() {
  div
   .html("<h1>Bar Graph</h1><br> <svg class='chart'></svg>")
      .style("left", (d3.event.pageX - 34) + "px")
      .style("top", (d3.event.pageY - 12) + "px");
}

function mouseout() {
  div.transition()
      .duration(500)
      .style("opacity", 1e-6);
}

// make bar graph
var width = 300,
    height = 300;

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

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);

d3.tsv("data.tsv", type, function(error, data) {
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  var barWidth = width / data.length;

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

  bar.append("rect")
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .attr("width", barWidth - 1);

  bar.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.value) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>
  </body>
</html>

提前致谢！

道歉，data.tsv文件包含以下内容：

情绪价值强烈积极的211 正面222 中立654 负618 强烈否定343

Answer 1

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

div.tooltip {
  position: absolute;
  text-align: center;
  width: 500px;
  height: 550px;
  padding: 8px;
  font: 10px sans-serif;
  background: #ddd;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

    </style>
    <script type="text/javascript">

var w = 960,
    h = 500;

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

svg.append("svg:g")
    .attr("transform", "translate(480,50)rotate(60)scale(2)")
  .append("svg:rect")
    .attr("width", 140)
    .attr("height", 140)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 1e-6);

function mouseover() {
  div.transition()
      .duration(500)
      .style("opacity", 1);
}

// where the tooltip previosly contained an image
function mousemove() {
  div
   .html("<h1>Bar Graph</h1><br> <svg class='chart'></svg>")
      .style("left", (d3.event.pageX - 34) + "px")
      .style("top", (d3.event.pageY - 12) + "px");
}

function mouseout() {
  div.transition()
      .duration(500)
      .style("opacity", 1e-6);
}

// make bar graph
var width = 300,
    height = 300;

var y = d3.scale.linear()
    .range([height, 0]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);

d3.tsv("data.tsv", type, function(error, data) {
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  var barWidth = width / data.length;

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

  bar.append("rect")
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .attr("width", barWidth - 1);

  bar.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.value) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>

'data.tsv'文件不在我们身边，我们只写了

function mousemove() {
  div
   .html("<h1>Bar Graph</h1><br> <svg class='chart'></svg>")
      .style("left", (d3.event.pageX - 34) + "px")
      .style("top", (d3.event.pageY - 12) + "px");
}

上面的函数会在工具提示中放置'条形图'文本和一个svg元素。希望你能得到它。如果不要求更多......

D3：在工具提示中显示图形

1 个答案: