d3plus/d3plus-viz

override the predefined colors

Opened this issue · 2 comments

Hello,
In d3plus V1, for a TreeMap, I used to define arrays of colors that I use in the treeMap depending on my skin. I just needed to put this array in the .color() and my TreeMap takes these colors automaticlly like the following example

<script charset="UTF-8" src="http://www.d3plus.org/js/d3.js"></script> <script charset="UTF-8" src="http://www.d3plus.org/js/d3plus.js"></script>
<script type='text/javascript'> var sample_data=[{"LivraisonPays":"Argentina" , "year":2015 , "Prix":3 }, {"LivraisonPays":"Argentina" , "year":2022 , "Prix":81 }, {"LivraisonPays":"Argentina" , "year":2014 , "Prix":81 }, {"LivraisonPays":"Argentina" , "year":2022 , "Prix":264 }, {"LivraisonPays":"France" , "year":2022 , "Prix":27 }, {"LivraisonPays":"France" , "year":2012 , "Prix":27 }, {"LivraisonPays":"France" , "year":2016 , "Prix":28 }, {"LivraisonPays":"France" , "year":2017 , "Prix":28 }, {"LivraisonPays":"France" , "year":2012 , "Prix":28 }, {"LivraisonPays":"Austria" , "year":2013 , "Prix":14 }, {"LivraisonPays":"Austria" , "year":2015 , "Prix":15 }, {"LivraisonPays":"Austria" , "year":2015 , "Prix":34 }, {"LivraisonPays":"Austria" , "year":2021 , "Prix":35 }, {"LivraisonPays":"Austria" , "year":2022 , "Prix":36 } ]; var visualization = d3plus.viz() .container("#viz") .data(sample_data) .type("tree_map") .id(["LivraisonPays","year"]) .size("Prix") .color({"heatmap": [ '#BFEFFF','#104E8B'],"missing" : "black"}) .color({"range": [ '#00CDCD','#FFFFFF','#0023fa'],"missing" :"black"}) .color({"scale": [ '#BFEFFF','#ADD8E6','#33A1C9','#009ACD','#00B2EE','#87CEFF','#87CEFA','#4F94CD','#5CACEE','#63B8FF','#4682B4','#1874CD','#C6E2FF','#1E90FF'],"missing" :"black"}) .depth(0) .labels({ "align": "left", "valign": "top" }) .background( "#FFFFFF" ) .font ({"family":"Times","decoration":"none"}) .legend(false) .mouse({ "move":false}) .draw() </script>

I can't find a way to use my arrays of predefined colors in V2. I can see that we can use functions but this isn't what I need. I need to override ur predefined colors for a treemap or a Pie.
Can I do that in V2?

Thank you very much.

Hello,
I am trying to override your predefined colors in a pie/treemap. I need to use my own set of colors. My set of Colors are NOT RELATED TO THE DATA. I just need that the Treemap/Pie take my colors instead of your default colors.
I tried to create a JS in the shapeConfig. You find My example here : https://jsfiddle.net/ubxLemfy/
It works but the legend donesn't correspond to the colors in the Treeamp/Pie, in my example, sweden is red in the pie while it is purple in the legend.
Am I doing somethig wrong? is there another way to do it?
In version 1 I just needed to add
.color({"scale": [ Array of Colors]})