Wie Text an d3js Dispatch-Diagramm anhängen

Ich habe this d3js v3 Diagramm und fragte mich, ob es möglich ist, die Werte in einem Textformat an die Bar und das Donut-Diagramm anhängen, und wenn ja, wie Sie gehen würden darüber zu tun? HierWie Text an d3js Dispatch-Diagramm anhängen

ist der Code:

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<head> 
<style> 
body { 
    font-family:arial; 
    font-size:10px; 
    margin:auto; 
    width:1100px; 
} 

.axis text { 
    font: 10px sans-serif; 
} 

.axis line, 
.axis path { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 
select { 
    background-color: #fff; 
    border: 1px solid #fff; 
    border-bottom: 1px solid #ccc; 
    color: #000; 
    padding: 3px 3px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 10px; 
    margin: 2px 2px; 
    cursor: pointer; 
} 
select:focus {outline:0;} 
.Row 
{ 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
.Column 
{ 
    display: table-cell; 
    position:relative; 
} 
</style> 
</head> 
<body> 
<div class="Row"> 
<div class="Column" id="chart"></div> 
</div> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script> 

var dispatch = d3.dispatch("load", "statechange"); 

var groups = [ 
    "Team 1", 
    "Team 2", 
    "Team 3" 
]; 

d3.csv("data.csv", type, function(error, states) { 
    if (error) throw error; 
    var stateById = d3.map(); 

    states.forEach(function(d) { stateById.set(d.id, d); }); 
    dispatch.load(stateById); 
    dispatch.statechange(stateById.get("CA")); 
}); 

// A drop-down menu for selecting a state; uses the "menu" namespace. 
dispatch.on("load.menu", function(stateById) { 
    var select = d3.select("#chart") 
    .append("div") 
    .append("select") 
     .on("change", function() { dispatch.statechange(stateById.get(this.value)); }); 

    select.selectAll("option") 
     .data(stateById.values()) 
    .enter().append("option") 
     .attr("value", function(d) { return d.id; }) 
     .text(function(d) { return d.id; }); 

    dispatch.on("statechange.menu", function(state) { 
    select.property("value", state.id); 
    }); 
}); 

// A bar chart to show total population; uses the "bar" namespace. 
dispatch.on("load.bar", function(stateById) { 
    var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
     width = 80 - margin.left - margin.right, 
     height = 290 - margin.top - margin.bottom; 

    var y = d3.scale.linear() 
     .domain([0, d3.max(stateById.values(), function(d) { return d.total; })]) 
     .rangeRound([height, 0]) 
     .nice(); 

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

    var svg = d3.select("#chart").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 + ")"); 

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

    var rect = svg.append("rect") 
     .attr("x", 4) 
     .attr("width", width - 4) 
     .attr("y", height) 
     .attr("height", 0) 
     .style("fill", "#aaa"); 

    dispatch.on("statechange.bar", function(d) { 
    rect.transition() 
     .attr("y", y(d.total)) 
     .attr("height", y(0) - y(d.total)); 
    }); 
}); 

// A pie chart to show population by age group; uses the "pie" namespace. 
dispatch.on("load.pie", function(stateById) { 
    var width = 260, 
     height = 300, 
     radius = Math.min(width, height)/2; 

    var color = d3.scale.ordinal() 
     .domain(groups) 
     .range(["steelblue", "lightblue", "darkorange"]); 

    var arc = d3.svg.arc() 
     .outerRadius(radius - 10) 
     .innerRadius(radius - 60); 

    var pie = d3.layout.pie() 
     .sort(null); 

    var svg = d3.select("#chart").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
    .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    var path = svg.selectAll("path") 
     .data(groups) 
    .enter().append("path") 
     .style("fill", color) 
     .each(function() { this._current = {startAngle: 0, endAngle: 0}; }); 

    dispatch.on("statechange.pie", function(d) { 
    path.data(pie.value(function(g) { return d[g]; })(groups)).transition() 
     .attrTween("d", function(d) { 
      var interpolate = d3.interpolate(this._current, d); 
      this._current = interpolate(0); 
      return function(t) { 
      return arc(interpolate(t)); 
      }; 
     }); 
    }); 
}); 

// Coerce population counts to numbers and compute total per state. 
function type(d) { 
    d.total = d3.sum(groups, function(k) { return d[k] = +d[k]; }); 
    return d; 
} 

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

Und hier ist der Datensatz:

id,Team 1,Team 2,Team 3 
AL,3105,5523,2590 
AK,5208,8564,4215 
AZ,5159,8286,3626 
AR,2020,3432,1572 
CA,2704,4499,2159 
CO,3582,5871,2617 
CT,2116,4036,1969 
DE,5931,9949,4741 
DC,3635,5043,2522 
FL,1140,1938,9250 
GA,7405,1250,5578 
HI,8720,1340,6401

Quelle

2017-02-01 Robert Andersson

möchten Sie als Etiketten anzeigen? – MMK

Sie haben das Label zu erstellen:

var label = svg.append("text") 
    .attr("x", 4) 
    .attr("y", height) 
    .attr("dy", ".35em") 
    .text(function(d) { return "0"; });

Dann einen Übergang hinzufügen, auf diesem neuen Text

label.transition() 
    .attr("y", y(d.total) + 5) 
    .text(d.total);

Siehe https://plnkr.co/edit/wtq96BAZ3Zh1SaczjLT6?p=preview

Quelle

2017-02-01 16:15:18

Wie Text an d3js Dispatch-Diagramm anhängen

Antwort

Verwandte Themen