D3.horizo​​n图表无法渲染

Question

我尝试使用D3.js和this example（来自古老的杰森戴维斯）渲染一个简单的水平图表，如Horizon.js。我使用了一些健身追踪数据。

不幸的是，Mike Bostock示例使用了一个奇怪的json布局，并对行进行了一些模糊的旋转/转置。让它很难遵循。

我的JSFiddle示例http://jsfiddle.net/Nyquist212/bwz75t7t/没有呈现任何内容。甚至没有错误。我的代码和数据看起来像这样......

var data=[{"key":"active time","date":"05/13/2013","value":"3860.0"},{"key":"active time","date":"05/14/2013","value":"5167.0"},
{"key":"active time","date":"05/15/2013","value":"5663.0"},
{"key":"active time","date":"05/22/2013","value":"3371.0"},{"key":"distance","date":"05/13/2013","value":"5766.0"},{"key":"distance","date":"05/14/2013","value":"7472.0"},{"key":"distance","date":"05/15/2013","value":"8264.0"},{"key":"distance","date":"05/22/2013","value":"4989.0"},{"key":"steps","date":"05/13/2013","value":"7210.0"},{"key":"steps","date":"05/14/2013","value":"9481.0"},{"key":"steps","date":"05/15/2013","value":"10431.0"},{"key":"steps","date":"05/16/2013","value":"1006.0"},{"key":"steps","date":"05/22/2013","value":"6268.0"}];

    data.forEach(function(d) {
        var parseDate = d3.time.format("%m/%d/%Y").parse;
        d.date = parseDate(d.date); 
        d.value = Math.round(+d.value);
        });

var margin  = {top:5, right:5, bottom:5, left:5},
    height  = 500 - margin.top - margin.bottom, 
    width   = 500 - margin.left - margin.right;

var chart = d3.horizon()
    .width(width)
    .height(height)
    .bands(1)
    .mode("mirror")
    .interpolate("basis");

var svg = d3.select("#body").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.data([data]).call(chart);

有人可以帮我理解“塑造”的形象吗？我需要按摩我的json才能使这个工作？这甚至是我的问题吗？

由于

Answer 1

您的SVG未添加到DOM，因为没有id="body"的元素。第218行需要使用标记选择器body而不是id选择器#body，然后SVG将存在于文档中。

进入文档后，请注意SVG中的数据点是NaN：

正如您所怀疑的那样，数据格式有问题。将您的示例与示例使用的数据结构进行比较：

Afaict，该示例是 [timestamp，value] 形式的二维数组，由 timestamp 排序。

来自http://bl.ocks.org/mbostock/1483226#index.html中的数据处理方法：

data = data.rate.map(function(rate, i) {
    return [Date.UTC(data.year[i], data.month[i] - 1), rate - mean];
});

如果您以相同的方式格式化数据，它应该可以工作。试试这个：

console.log('before: ', data);
data = data.map(function(obj, i) {
    return [obj.date.getTime(), obj.value];
}).sort(function(a, b) { 
    return a[0] > b [0] ? 1 : (a[0] == b[0] ? 0 : -1); 
});
console.log('after: ', data);
svg.data([data]).call(chart);

最终会显示一些内容 - 尽管您可能希望检查数据并确保其正确翻译。

注意：上面的代码将3个数据键段（active time，distance和steps）展平为一个数组。您可能需要将它们分成不同的系列。