Javascript NVD3: dodawanie kolorów do punktów na wykresie punktowym

Question

Próbuję utworzyć wykres punktowy na podstawie niektórych danych z wartościami x, yi z.

Mój kod jest taki sam, jak przykład na stronie internetowej NVD3, http://nvd3.org/ghpages/scatter.html, z tym że ja również obliczyć wartość z. Powiedzmy, że z = x + y. Zamiast zmieniać wartość promienia, chciałbym ustawić kolor poprzez interpolację między dwoma kolorami.

Wszystkie punkty są wyświetlane na wykresie, ale nie mogę określić, jak ustawić kolor dla poszczególnych punktów, tylko dla serii. Dla uproszczenia, po raz pierwszy próbowano ustawienie punktów do statycznego koloru tak:

[{"key":"X Plus Y","values":[{"x":0,"y":0,"z":0,"color":"#ff0000"}, ...] 

ale to nie działa, więc myślę, że trzeba to zrobić w javascript. Zajrzałem do scatterChart.js, ale nie widziałem łatwego sposobu. Ale ja w żadnym wypadku nie jestem ekspertem od javascript, więc mogłem łatwo coś przeoczyć.

Każda rada, jak to zrobić? Czy muszę się nauczyć, jak utworzyć nowy plik modelu?

Chciałbym również, aby wyświetlić wartość oo w podpowiedziach, ale to będzie krok 2.

Dzięki

Answer 1

ja właśnie napotkasz ten sam problem i znaleźć sposób obejścia problemu, który pasuje do mojego korzystania sprawa - YMMV.

Zasadniczo moje zrozumienie (z kodu źródłowego NVD3) polega na tym, że w rzeczywistości można ustawić tylko kolor dla serii, a nie dla poszczególnych punktów: dlatego dodam element color: '#rrggbb' do wartości obiektów tak czy inaczej, jak w przykładzie (tylko dlatego, że łatwiej jest budować strukturę danych w ten sposób), a następnie ustawić dla każdej serii wartość koloru (używam underscore.js, ale powinieneś być w stanie to zrobić w czystym JavaScript):

final_groups = _.map(groups, function(values, group_id) { 
    return { key: group_id, color: values[0].color, values: values }; 
}); 

Jeśli chcesz użyć kolorowego kontinuum zamiast ustawiać kolory punkt po punkcie lub używając dyskretnej skali, użyłem mbostock's advice from this answer, aby pozwolić D3 generować wartości kolorów dla mnie:

function compute_color_on_linear_scale(data, value, colorProperty, colorRange) { 
    // get a list of all the groups (this works if the colorProperty, 
    // aka z in your case, is numeric, otherwise the sort function 
    // needs to be adjusted accordingly) 
    // In your case, you could just write item.z rather than item[colorProperty] 
    // if your function doesn't need to be generic, and in that case you can 
    // omit the colorProperty argument from the argument list altogether 
    categories = _.uniq(_.map(data, function(item) { 
     return item[colorProperty]; 
    }).sort(function(a,b){return a - b}), true); 

    // if no color range was provided, set a default one 
    if(typeof colorRange === 'undefined') { colorRange = ['red', 'green']; } 

    // this is mbostock's magic enchantment from his reply linked above 
    var color = d3.scale.ordinal() 
     .domain(categories) 
     .range(d3.range(categories.length).map(d3.scale.linear() 
     .domain([0, categories.length - 1]) 
     .range(colorRange) 
     .interpolate(d3.interpolateLab))); 

    return color(value); 
} 

To powinno wystarczyć. Ostatnim akcentem było ukrycie legendy, ponieważ nie miałoby to większego sensu w tym przypadku.

Co do wyświetlania wartości z w etykiecie narzędziowej, należy zastąpić domyślną funkcję podpowiedzi funkcji scatterChart(), np.

var chart = nv.models.scatterChart() 
    .showDistX(true) 
    .showDistY(true) 
    .tooltipContent(function(key, x, y, obj) { 
     return '<h3>' + obj.point.label + ' (' + key + ')</h3>'; 
    }); 

można dostosować to tyle, ile trzeba - jeśli tylko dodać console.log(arguments); na początku funkcji, można sprawdzić w deweloperów narzędzi w Twojej przeglądarce dokładnie, które dane są dostępne do wykorzystania w podpowiedzi:

[...] 
.tooltipContent(function(key, x, y, obj) { 
    console.log(arguments); 
    return '<h3>' + obj.point.label + ' (' + key + ')</h3>'; 
}); 

Answer 2

Aby dodać atrybut koloru dla bąbelków na wykresie punktowym, możemy dodać akcesor getColor, np. GetSize w pliku nv.models.scatter.

, getSize  = function(d) { return d.size || 1} // accessor to get the point size 
, getColor  = function(d) { 
       var colors = ["red", "orange", "yellow", "green", "blue"]; 
       return colors[d.color] || 'red'} // accessor to get the point color 

Możesz dodać kolor za pomocą „wypełnić” atrybut, gdzie koło jest malowany

//Info:May be on Mousehover?? 
points.enter().append('circle') 
    .attr('cx', function(d,i) { return x0(getX(d,i)) }) 
    .attr('cy', function(d,i) { return y0(getY(d,i)) }) 
    .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) }) 
    .attr('fill', function(d,i) { return getColor(d,i)});