Question

我正在尝试制作一个http://bl.ocks.org/bae25/10797393这样的静态立体图

csv文件（“ cubism_test.csv”）看起来像这样：

日期，一，二，三，四，五

2018-06-01,132.54,18.44,68.36,0,56.63

2018-06-02,146.64,19.18,71.74,0,59.66

2018-06-03,160.77,117.98,75.15,0,62.71

2018-06-04,193.29,171.53,78.59,0,65.76

2018-06-05,275.92,78.64,82.05,0,68.82

<script>
// create context and horizon
var context = cubism.context()
                    .size(30)
                .stop();
var horizon = context.horizon()
                     .extent([0,2]);

d3.csv("cubism_test.csv", function(data)
{
    var format = d3.time.format("%Y-%m-%d");
    data.forEach(function(d, i)
    {
    d.date = format.parse(d.date);
    d.one= +d.one;
    d.two= +d.two;
    d.three= +d.three;
    d.four= +d.four;
    d.five= +d.five;
    })
    console.log(data);

// define metric accessor
   context.metric(function(start,stop,step,callback)
   {
        var values = data;
        console.log(values);
       callback(null, values);
   }, name);



d3.select("#graph").selectAll(".horizon")
      .data(data)
      .enter()
      .append("div")
      .attr("class", "horizon")
      .call(horizon);

    // set rule
    d3.select("#body").append("div")
      .attr("class", "rule")
      .call(context.rule());

// set focus
context.on("focus", function(i) {
    d3.selectAll(".value")
        .style( "right", i == null ? null : context.size() - i + "px");
});
// set axis 
var axis = context.axis()
d3.select("#graph").append("div").attr("class", "axis").append("g").call(axis);


});
</script>

显然这是行不通的，但我不知道要解决它。我找不到有关如何处理d3数据的适当方法。我发现的内容非常基础，可以告诉您如何使用数据制作简单的圆圈，而不是时间序列。

我不知道如何告诉d3使用列标题作为名称，或者让它使用列中的值作为每个立体/水平图表的值。

您的建议将不胜感激。

d3静态立体图-无法正确输入数据

0 个答案: