Question

Hi I am new in d3js so I am unable to use mouseover event in given code of pie chart...i have a <div> with id named chart so how can I create some class that mouseover event and show a label?

Here is the code that I am using to draw pie chart:

var w = 300;
var h = 300;

var dataset =  [
  {"year":"2017-07-01","value":"5"},
  {"year":"2017-07-02","value":"10"},
  {"year":"2017-07-03","value":"15"},
  {"year":"2017-07-04","value":"20"},
  {"year":"2017-07-05","value":"25"},
  {"year":"2017-07-06","value":"30"},
  {"year":"2017-07-07","value":"35"},
  {"year":"2017-07-08","value":"40"},
  {"year":"2017-07-09","value":"45"},
  {"year":"2017-07-10","value":"50"},
  {"year":"2017-07-11","value":"55"},
  {"year":"2017-07-12","value":"60"},
  {"year":"2017-07-13","value":"65"},
  {"year":"2017-07-14","value":"70"}
];

var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

var pie = d3.layout.pie()
  .value(function(d) {
    return d.value;
  });

var color = d3.scale.category20();

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

var arcs = svg.selectAll("g.arc")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("class", "arc")
  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);

arcs.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) {
    return d.value;
  });

Answer 1

I assume that what you want is a tooltip. The easiest way to do this is to append an svg:title element to each circle, as the browser will take care of showing the tooltip and you don't need the mousehandler. The code would be something like vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") ... .append("svg:title") .text(function(d) { return d.x; }); If you want fancier tooltips, you could use tipsy for example. See here for an example.

Answer 2

在HTML上添加样式

(!tileTexture.loadFromFile("images/ConceptTile.png"))
return EXIT_FAILURE;

JS方面

   <style>
      #chart {                                                           
        height: 360px;                                                  
        position: relative;                                              
        width: 360px;                                                    
      }                                                                 
      .tooltip {                                                         
        background: #eee;                                                
        box-shadow: 0 0 5px #999999;                                    
        color: #333;                                                    
        display: none;                                                   
        font-size: 12px;                                                
        left: 130px;                                                    
        padding: 10px;                                                  
        position: absolute;                                             
        text-align: center;                                             
        top: 95px;                                                       
        width: 80px;                                                     
        z-index: 10;                                                     
      }                                                                 
      .legend {
        font-size: 12px;
      }
      rect {
        stroke-width: 2;
      }
    </style>

我希望这会对你有所帮助。您可能需要解决，这取决于您希望如何显示工具提示以及如何在图表中填充数据。

Use mouseover in pie chart and show label in d3 js

2 个答案: