堆棧內存溢出
  簡體   English   中英

使用D3和弦圖中的工具提示獲取值-錯誤：“未定義目標的屬性”

[英]Using tooltip in D3 chord diagram to get value - Error: “property of target undefined”

 原文  2017-04-21 20:08:09  0   1    javascript/ d3.js/ tooltip

問題描述

我正在嘗試創建一個和弦圖，並將每個色帶的值和目標值懸停在上方時可以訪問。 我還希望能夠訪問該值的索引以引用使用顏色。

目前，我遇到以下錯誤：每次將鼠標懸停時都未定義d-我不確定如何訪問所需的值。如果可能，我不想添加任何其他.js庫。 

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

body {
  font: 10px sans-serif;
}

.group-tick line {
  stroke: #000;
}

.ribbons {
  fill-opacity: 0.67;
}

.toolTip {
    position: absolute;
    display: none;
    min-width: 80px;
    height: auto;
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #6F257F;
    padding: 14px;
    text-align: center;
}

</style>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    outerRadius = Math.min(width, height) * 0.5 - 40,
    innerRadius = outerRadius - 30;

var formatValue = d3.formatPrefix(",.0", 1e3);

var chord = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending);

var arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var ribbon = d3.ribbon()
    .radius(innerRadius);

var color = d3.scaleOrdinal()
    .domain(d3.range(4))
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .datum(chord(matrix));

var group = g.append("g")
    .attr("class", "groups")
  .selectAll("g")
  .data(function(chords) { return chords.groups; })
  .enter().append("g");

group.append("path")
    .style("fill", function(d) { return color(d.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
    .attr("d", arc);

var groupTick = group.selectAll(".group-tick")
  .data(function(d) { return groupTicks(d, 1e3); })
  .enter().append("g")
    .attr("class", "group-tick")
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });

groupTick.append("line")
    .attr("x2", 6);

groupTick
  .filter(function(d) { return d.value % 5e3 === 0; })
  .append("text")
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return formatValue(d.value); });

var tooltip = d3.select("body").append("div").attr("class", "toolTip");


g.append("g")
    .attr("class", "ribbons")
  .selectAll("path")
  .data(function(chords) { return chords; })
  .enter().append("path")
    .attr("d", ribbon)
    .style("fill", function(d) { return color(d.target.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); })
    .on("mouseover", function(d) {
      tooltip
          .style("left", d3.event.pageX - 50 + "px")
          .style("top", d3.event.pageY - 70 + "px")
          .style("display", "inline-block")
          .html(function(d) {
            return (d.target.index) + "Hello";
          });
    })
    .on("mouseout", function(d){
      tooltip
          .style("display", "none")
    })
    ;

// Returns an array of tick angles and values for a given group and step.
function groupTicks(d, step) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, step).map(function(value) {
    return {value: value, angle: value * k + d.startAngle};
  });
}

</script>

我在這里使用教程： https : //bl.ocks.org/mbostock/4062006

1 個解決方案

解決方案1
 2 已采納  2017-04-21 21:04:41

問題在於您的工具提示沒有關聯的基准： 

var tooltip = d3.select("body").append("div").attr("class", "toolTip");

因此，當您說出tooltip.html(function(d) { ... ，沒有與該元素關聯的基准。

而是嘗試使用與所選和弦相關的基准： 

.on("mouseover", function(d) {  // the datum you want
  tooltip
      .style("left", d3.event.pageX - 50 + "px")
      .style("top", d3.event.pageY - 70 + "px")
      .style("display", "inline-block")
      .html(d.target.index + "Hello");
})


  <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .group-tick line { stroke: #000; } .ribbons { fill-opacity: 0.67; } .toolTip { position: absolute; display: none; min-width: 80px; height: auto; background: none repeat scroll 0 0 #ffffff; border: 1px solid #6F257F; padding: 14px; text-align: center; } </style> <svg width="960" height="960"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907] ]; var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), outerRadius = Math.min(width, height) * 0.5 - 40, innerRadius = outerRadius - 30; var formatValue = d3.formatPrefix(",.0", 1e3); var chord = d3.chord() .padAngle(0.05) .sortSubgroups(d3.descending); var arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var ribbon = d3.ribbon() .radius(innerRadius); var color = d3.scaleOrdinal() .domain(d3.range(4)) .range(["#000000", "#FFDD89", "#957244", "#F26223"]); var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .datum(chord(matrix)); var group = g.append("g") .attr("class", "groups") .selectAll("g") .data(function(chords) { return chords.groups; }) .enter().append("g"); group.append("path") .style("fill", function(d) { return color(d.index); }) .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); }) .attr("d", arc); var groupTick = group.selectAll(".group-tick") .data(function(d) { return groupTicks(d, 1e3); }) .enter().append("g") .attr("class", "group-tick") .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; }); groupTick.append("line") .attr("x2", 6); groupTick .filter(function(d) { return d.value % 5e3 === 0; }) .append("text") .attr("x", 8) .attr("dy", ".35em") .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; }) .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) .text(function(d) { return formatValue(d.value); }); var tooltip = d3.select("body").append("div").attr("class", "toolTip"); g.append("g") .attr("class", "ribbons") .selectAll("path") .data(function(chords) { return chords; }) .enter().append("path") .attr("d", ribbon) .style("fill", function(d) { return color(d.target.index); }) .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); }) .on("mouseover", function(d) { tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(d.target.index + "Hello"); }) .on("mouseout", function(d){ tooltip .style("display", "none") }) ; // Returns an array of tick angles and values for a given group and step. function groupTicks(d, step) { var k = (d.endAngle - d.startAngle) / d.value; return d3.range(0, d.value, step).map(function(value) { return {value: value, angle: value * k + d.startAngle}; }); } </script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 D3和弦圖 D3工具提示錯誤：“無法讀取未定義的屬性&#39;-1&#39;” D3 - 未顯示和弦圖的圓弧 將圖像添加到d3和弦圖 訪問線路和弦圖D3 為D3 Chord圖添加標簽 d3.js和弦圖動態工具提示 使用D3更改和轉換和弦圖中的數據集 可切換的 D3 和弦圖 D3和弦圖Google Chrome
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM