在 d3.js 中创建值而不是随机数据

Question

我是 d3 的新手。我找到了下面的脚本（来自 http://bl.ocks.org/dbuezas），当您按下按钮时，它会在图表上生成一个随机值，我的问题不是随机的，我想把我自己的值放在图表上。请帮忙。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

svg {
 width: 100%;
 height: 100%;
}

path.slice{
 stroke-width:2px;
}

polyline{
 opacity: .3;
 stroke: black;
 stroke-width: 2px;
 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")
 .append("svg")
 .append("g")

svg.append("g")
 .attr("class", "slices");
svg.append("g")
 .attr("class", "labels");
svg.append("g")
 .attr("class", "lines");

var width = 960,
    height = 450,
 radius = Math.min(width, height) / 2;

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

var arc = d3.svg.arc()
 .outerRadius(radius * 0.8)
 .innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()
 .innerRadius(radius * 0.9)
 .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()
 .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
 .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

function randomData (){
 var labels = color.domain();
 return labels.map(function(label){
  return { label: label, value: Math.random() }
 });
}

change(randomData());

d3.select(".randomize")
 .on("click", function(){
  change(randomData());
 });


function change(data) {

 /* ------- PIE SLICES -------*/
 var slice = svg.select(".slices").selectAll("path.slice")
  .data(pie(data), key);

 slice.enter()
  .insert("path")
  .style("fill", function(d) { return color(d.data.label); })
  .attr("class", "slice");

 slice  
  .transition().duration(1000)
  .attrTween("d", function(d) {
   this._current = this._current || d;
   var interpolate = d3.interpolate(this._current, d);
   this._current = interpolate(0);
   return function(t) {
    return arc(interpolate(t));
   };
  })

 slice.exit()
  .remove();

 /* ------- TEXT LABELS -------*/

 var text = svg.select(".labels").selectAll("text")
  .data(pie(data), key);

 text.enter()
  .append("text")
  .attr("dy", ".35em")
  .text(function(d) {
   return d.data.label;
  });
 
 function midAngle(d){
  return d.startAngle + (d.endAngle - d.startAngle)/2;
 }

 text.transition().duration(1000)
  .attrTween("transform", function(d) {
   this._current = this._current || d;
   var interpolate = d3.interpolate(this._current, d);
   this._current = interpolate(0);
   return function(t) {
    var d2 = interpolate(t);
    var pos = outerArc.centroid(d2);
    pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
    return "translate("+ pos +")";
   };
  })
  .styleTween("text-anchor", function(d){
   this._current = this._current || d;
   var interpolate = d3.interpolate(this._current, d);
   this._current = interpolate(0);
   return function(t) {
    var d2 = interpolate(t);
    return midAngle(d2) < Math.PI ? "start":"end";
   };
  });

 text.exit()
  .remove();

 /* ------- SLICE TO TEXT POLYLINES -------*/

 var polyline = svg.select(".lines").selectAll("polyline")
  .data(pie(data), key);
 
 polyline.enter()
  .append("polyline");

 polyline.transition().duration(1000)
  .attrTween("points", function(d){
   this._current = this._current || d;
   var interpolate = d3.interpolate(this._current, d);
   this._current = interpolate(0);
   return function(t) {
    var d2 = interpolate(t);
    var pos = outerArc.centroid(d2);
    pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
    return [arc.centroid(d2), outerArc.centroid(d2), pos];
   };   
  });
 
 polyline.exit()
  .remove();
};

</script>
</body>

我尝试在下面执行此代码，但它确实有效。

function randomData (){
 var labels = color.domain();
 return labels.map(function(label){
  return { label: "testlabel1",value: "41"
     },
    { label: "testlabel2", value: "27"
    },
    { label: "testlabel3", value: "101" 
    },
    { label: "testlabel4", value: "79"
     }
   });
  }

Answer 1

您可以在函数标签中粘贴 JSON ARRAY 或 ajax 调用远程数据

function randomData (){
    var labels = color.domain();
    return labels.map(function(label){
        return { /* YOUR JSON ARRAY */ }
    });
}

Answer 2

你可以试试这个代码，它可以工作，但是它没有数据数组，所以它只运行一次并且变成静态的。

function randomData (){
    return [{ label: 'one', value: 10 },
                   { label: 'two', value: 20 }, 
                   { label: 'three', value: 30 },
                   { label: 'four', value: 35 },
                   { label: 'five', value: 5 }
                  ];}

这里randomData()返回的是[object Object]这样的数组，我在做类似的甜甜圈，稍后会把最终的变体发给你。

在 d3.js 中创建值而不是随机数据

create values instead of random data in d3.js

javascript

jquery

d3.js