Customize classes ? about d3-simple-gauge HOT 4 CLOSED

Hi @lgodard,

For the moment, it is not possible to define custom class names as arguments. The modification can be easily done in the code to support this new feature. However, I think that it's not necessary to add this feature because you can manage easily different styles like this:

const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 250);

const simpleGaugeGroup = svg.append('g')
  .attr('class', 'gauge-group1'); // I put custom class on the gauge group.

const simpleGauge = new window.d3SimpleGauge.SimpleGauge({
  el: simpleGaugeGroup,  // The element that hosts the gauge
  height: 200,                
  sectionsCount: 2,
  width: 400
});

In your CSS code, you can define the specific style for the gauge-group1 like this:

/* Specific colors for the gauge-group1 */

.gauge-group1 .chart-color1 {
  fill: #f00;
}
.gauge-group1 .chart-color2 {
  fill: #0f0;
}
/* ... */

Let me know what you think about this approach. I can do the modification too to support custom class names in the code.

from d3-simple-gauge.

Hi Antoine,

Thanks a lot for your response

yes that's a correct way to achieve this in a full html context
Btw, my idea was to generate standalone colored svg gauges (without any css dep.)

i cloned and added an array config.sectionsColors and fillattr in the arc loop
it works

maybe, conditionally do this if config.sectionsColors is set ? (same for needle too)

Thanks again

Laurent

from d3-simple-gauge.

Hi @lgodard,

Yes, this a good idea. I can add this new configuration to specify colors for the groups. You can share me your code and I can include it in the source code and update doc.

Thanks for your suggestion.

from d3-simple-gauge.

I submited a pull request
I hope this will be ok

from d3-simple-gauge.