Question

我尝试使用此工具提示：http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html 但我没有什么问题。工具提示出现，但无法从数据中读取字段。它显示为未定义。 undefined 这是相关的代码：

  .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9)
               tooltip.html( "<br><strong><span style='color:white'>UserName:"+ d.User_ID +" </span><span style='color:white'></strong>")
               .style("left", (d3.event.pageX ) + "px")
               .style("top", (d3.event.pageY ) + "px");


      })

虽然csv文件中包含以下列：＆＃39; User_ID＆＃39;。为什么它未定义？

这是整个代码：

<!DOCTYPE html>

<meta charset="utf-8">


<style>

body {
  font: 10px sans-serif;
}

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

.browser text {
  text-anchor: end;
}


.tooltip {
 position: absolute;
        width: 110px;
        height: auto;
        padding: 10px;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
         line-height: 1;
  font-weight: bold;

  background: rgba(0, 0, 0, 0.8);

}


</style>
<body>

<br><br>
<center><button onclick="sort1()">ללא מיון</button></center>
<center>
<svg id="leg" width="300" height="130">
<text x="90" y="45" font-family="sans-serif" font-size="13px" >Executives</text>
<text x="90" y="75" font-family="sans-serif" font-size="13px" >Super Users</text>
<text x="90" y="105" font-family="sans-serif" font-size="13px" >Registered Users</text>
  <circle cx="70" cy="40" r="10" fill="#FF7F0E" />
  <circle cx="70" cy="70" r="10" fill="#AEC7E8" />
  <circle cx="70" cy="100" r="10" fill="#1F77B4" />
</svg>
</center>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

sort1("CsvSort");


//איזור למיון
function sort1(areaName){
    d3.select("svg:not(#leg)").remove();
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal().rangeRoundBands([0, width], .2);  //אחרי מיון
    var y = d3.scale.linear()
    .rangeRound([height, 0]);

    // add the tooltip area to the webpage
    var tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);




    var color = d3.scale.category20();
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
         .tickFormat(d3.format(".s"));

    //
    var area = d3.svg.area()
        .x(function(d) { return x(d.User_ID); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });
    //
    var stack = d3.layout.stack()
        .values(function(d) { return d.values; });

    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 + ")");

    d3.csv("aggData.csv", function(error, data) {
      color.domain(d3.keys(data[0]).filter(function(key) { return key !== "User_ID"; }));



      //3 אפשרויות למיון.
      if(areaName=="RegisteredUsers")
      data.sort(function(a, b) { return b.RegisteredUsers - a.RegisteredUsers; });
      if(areaName=="SuperUsers")
      data.sort(function(a, b) { return b.SuperUsers - a.SuperUsers; });
      if(areaName=="Executives")
      data.sort(function(a, b) { return b.Executives - a.Executives; });
      var browsers = stack(color.domain().map(function(name) {
            return {
                name: name,
                values: data.map(function(d) {
                    return {User_ID: d.User_ID, y: +d[name]}; // previously y: d[name]/100
                })
            };
        }));


      x.domain(data.map(function(d) { return d.User_ID; })); //אחרי מיון
      y.domain([0, d3.max(data, function(d){
          // return the maximum value of any column
          return d3.max(color.domain().map(function(n){ return +d[n]; }));
      })
    ]);

      var browser = svg.selectAll(".browser")
          .data(browsers)
        .enter().append("g")
          .attr("class", "browser");

      browser.append("path")
          .attr("class", "area")
          .attr("d", function(d) { return area(d.values); })

          .on("click", function(d) { sort1(d.name); })
          .style("fill", function(d) { return color(d.name); })
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9)
               tooltip.html( "<br><strong><span style='color:white'>UserName:"+ d.User_ID +" </span><span style='color:white'></strong>")
               .style("left", (d3.event.pageX ) + "px")
               .style("top", (d3.event.pageY ) + "px");


      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);


      })
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
    });
}

</script>

<br><br>

</body>

谢谢！

D3 AreaChart中的工具提示

0 个答案: