1
即時新增至d3。我發現下面的腳本（從http://bl.ocks.org/dbuezas），當您按下按鈕時，將在圖表上生成一個隨機值，我的問題是隨機的，我想把我自己的值放在圖表上。請幫忙。在d3.js中創建值而不是隨機數據
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
svg {
\t width: 100%;
\t height: 100%;
}
path.slice{
\t stroke-width:2px;
}
polyline{
\t opacity: .3;
\t stroke: black;
\t stroke-width: 2px;
\t fill: none;
}
</style>
<body>
<button class="randomize">randomize</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body")
\t .append("svg")
\t .append("g")
svg.append("g")
\t .attr("class", "slices");
svg.append("g")
\t .attr("class", "labels");
svg.append("g")
\t .attr("class", "lines");
var width = 960,
height = 450,
\t radius = Math.min(width, height)/2;
var pie = d3.layout.pie()
\t .sort(null)
\t .value(function(d) {
\t \t return d.value;
\t });
var arc = d3.svg.arc()
\t .outerRadius(radius * 0.8)
\t .innerRadius(radius * 0.4);
var outerArc = d3.svg.arc()
\t .innerRadius(radius * 0.9)
\t .outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var key = function(d){ return d.data.label; };
var color = d3.scale.ordinal()
\t .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
\t .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
function randomData(){
\t var labels = color.domain();
\t return labels.map(function(label){
\t \t return { label: label, value: Math.random() }
\t });
}
change(randomData());
d3.select(".randomize")
\t .on("click", function(){
\t \t change(randomData());
\t });
function change(data) {
\t /* ------- PIE SLICES -------*/
\t var slice = svg.select(".slices").selectAll("path.slice")
\t \t .data(pie(data), key);
\t slice.enter()
\t \t .insert("path")
\t \t .style("fill", function(d) { return color(d.data.label); })
\t \t .attr("class", "slice");
\t slice \t \t
\t \t .transition().duration(1000)
\t \t .attrTween("d", function(d) {
\t \t \t this._current = this._current || d;
\t \t \t var interpolate = d3.interpolate(this._current, d);
\t \t \t this._current = interpolate(0);
\t \t \t return function(t) {
\t \t \t \t return arc(interpolate(t));
\t \t \t };
\t \t })
\t slice.exit()
\t \t .remove();
\t /* ------- TEXT LABELS -------*/
\t var text = svg.select(".labels").selectAll("text")
\t \t .data(pie(data), key);
\t text.enter()
\t \t .append("text")
\t \t .attr("dy", ".35em")
\t \t .text(function(d) {
\t \t \t return d.data.label;
\t \t });
\t
\t function midAngle(d){
\t \t return d.startAngle + (d.endAngle - d.startAngle)/2;
\t }
\t text.transition().duration(1000)
\t \t .attrTween("transform", function(d) {
\t \t \t this._current = this._current || d;
\t \t \t var interpolate = d3.interpolate(this._current, d);
\t \t \t this._current = interpolate(0);
\t \t \t return function(t) {
\t \t \t \t var d2 = interpolate(t);
\t \t \t \t var pos = outerArc.centroid(d2);
\t \t \t \t pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
\t \t \t \t return "translate("+ pos +")";
\t \t \t };
\t \t })
\t \t .styleTween("text-anchor", function(d){
\t \t \t this._current = this._current || d;
\t \t \t var interpolate = d3.interpolate(this._current, d);
\t \t \t this._current = interpolate(0);
\t \t \t return function(t) {
\t \t \t \t var d2 = interpolate(t);
\t \t \t \t return midAngle(d2) < Math.PI ? "start":"end";
\t \t \t };
\t \t });
\t text.exit()
\t \t .remove();
\t /* ------- SLICE TO TEXT POLYLINES -------*/
\t var polyline = svg.select(".lines").selectAll("polyline")
\t \t .data(pie(data), key);
\t
\t polyline.enter()
\t \t .append("polyline");
\t polyline.transition().duration(1000)
\t \t .attrTween("points", function(d){
\t \t \t this._current = this._current || d;
\t \t \t var interpolate = d3.interpolate(this._current, d);
\t \t \t this._current = interpolate(0);
\t \t \t return function(t) {
\t \t \t \t var d2 = interpolate(t);
\t \t \t \t var pos = outerArc.centroid(d2);
\t \t \t \t pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
\t \t \t \t return [arc.centroid(d2), outerArc.centroid(d2), pos];
\t \t \t }; \t \t \t
\t \t });
\t
\t polyline.exit()
\t \t .remove();
};
</script>
</body>我想下面這樣的代碼，但它doenst工作。
function randomData(){
\t var labels = color.domain();
\t return labels.map(function(label){
\t \t return { label: "testlabel1",value: "41"
\t \t \t \t },
\t \t \t \t { label: "testlabel2", value: "27"
\t \t \t \t },
\t \t \t \t { label: "testlabel3", value: "101"
\t \t \t \t },
\t \t \t \t { label: "testlabel4", value: "79"
\t \t \t \t \t }
\t \t \t });
\t \t }
你可以看看我的例子 - http://jsfiddle.net/jvalleo17/4L8fphsu/15/ 它包含你所需要的。 –