Fancy Bubble Chart D3 Javascript

Question

Ich würde gerne fragen, ob jemand weiß, wie man den Code zu ähnlichen Diagramm wie diese https://www.theguardian.com/world/interactive/2013/feb/12/state-of-the-union-reading-level bekommen Es ist in D3 geschrieben, aber ich konnte ähnliche Codes online nicht finden.

Dank

Answer 1

Ich denke, das auf einem Streudiagramm nur ein ziemlich beteiligt Tooltip ist. Hier ist ein einfacher example:

// Define the div for the tooltip 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

// Add the scatterplot 
svg.selectAll("dot")  
    .data(data)   
.enter().append("circle")        
    .attr("r", 5)  
    .attr("cx", function(d) { return x(d.date); })  
    .attr("cy", function(d) { return y(d.close); })  
    .on("mouseover", function(d) {  
     div.transition()   
      .duration(200)  
      .style("opacity", .9);  
     div .html(formatTime(d.date) + "<br/>" + d.close) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 28) + "px");  
     })     
    .on("mouseout", function(d) {  
     div.transition()   
      .duration(500)  
      .style("opacity", 0); 
    }); 

Sie könnten auch this other example nützlich finden.