Использование массива внутри JSON в D3 Graph

Question

Alright так что у меня JSON, который выглядит следующим образом:

var anotherBlob = [ 
{ 
"daily_percentile_90th": 1159.8000000000002, 
"min_percentile_90th": 1159.8, 
"sparks": [ 
    3107.9, 
    2856.0, 
    2778.8, 
    2987.5, 
    3364.2, 
    3112.6, 
    2934.7, 
    2798.6, 
    2933.0, 
    2813.8, 
    2916.8, 
    2948.1, 
    2859.0, 
    1159.8 
], 
"max_percentile_90th": 3364.2, 
"daily_percentile_50th": 804.0, 
"timerName": "Search:Books:SearchResults", 
"daily_average": 876.2513661202186 
}, 
{ 
"daily_percentile_90th": 1598.8000000000002, 
"min_percentile_90th": 1598.8, 
"sparks": [ 
    4024.0, 
    3233.0, 
    3845.4, 
    3300.6, 
    4364.1, 
    4141.1, 
    4017.3, 
    4228.0, 
    4261.4, 
    5518.9, 
    5118.8, 
    4321.7, 
    4239.0, 
    1598.8 
], 
"max_percentile_90th": 5518.9, 
"daily_percentile_50th": 1159.0, 
"timerName": "Temple:Shared", 
"daily_average": 1213.0819672131147 
}, 
{ 
"daily_percentile_90th": 586.2, 
"min_percentile_90th": 586.2, 
"sparks": [ 
    15149.6, 
    15616.2, 
    15078.0, 
    15126.8, 
    15441.8, 
    15454.0, 
    12184.0, 
    11328.6, 
    13511.6, 
    11969.4, 
    12047.5, 
    11245.0, 
    14799.6, 
    11849.0 
}]; 

И я делаю график D3 на основе значений в «искры» - проблема, что я дон Не знаю, как проходить через массив, потому что он находится внутри JSON. Я могу создать график просто отлично, исходя из любого ежедневного процентиля или средних значений, но я не могу получить доступ к данным «искры».

Вот что я создаю граф, основанный на daily__percentile_90th и один на основе min_percentile_90th, но как мне его изменить, чтобы вместо этого использовать данные «искры»?

var daily90th = function(d) { return d.daily_percentile_90th } 
var dailyMin = function(d) { return d.min_percentile_90th } 
//These two lines go above the JSON in order to work. 

(function() { 
    var data = anotherBlob.slice() 
    var x = d3.time.scale() 
    .range([10, 280]) 
    .domain(d3.extent(data, dailyMin)) 

    var y = d3.scale.linear() 
    .range([180, 10]) 
    .domain(d3.extent(data, daily90th)) 

    var svg = d3.select("#demo").append("svg:svg") 
    .attr("width", 300) 
    .attr("height", 200) 
    svg.selectAll("circle").data(anotherBlob).enter() 
    .append("svg:circle") 
    .attr("r", 4) 
    .attr("cx", function(d) { return x(dailyMin(d)) }) 
    .attr("cy", function(d) { return y(daily90th(d)) }) 
    .attr("style", "cursor: pointer;") 
    .on("click", function(d) { 
     d3.select("#demo .value").text("Timer Name: " + d.timerName) 
    }) 
})(); 

спасибо. Любая помощь будет высоко ценится!

Answer 1

Вы можете создать другой выбор данных в существующем выборе данных. Как объяснено в ссылке данной Ларса Kotthoff в комментариях, вы должны сделать:

var dp90 = d3.selectAll("circle").data(data); 
dp90.enter().append("g")... // Or "circle", "rect"... :) 

Это создаст выбор с вашей глобальной JSON.

Теперь, чтобы получить доступ к полю «искра», вы можете:

var sparks = dp90.selectAll(".spark").data(function(d){ return d.sparks }); 
sparks.enter().append("circle").attr("class", "spark")... 

Он теперь будет перебирать на каждом элементе массива искр, создавая круг для каждого из них.

Надеюсь, это поможет.