Comments (10)
Can you reference them by their feature name which is already injected in?
For example: http://visible.io/charts/column/multi-dimension.html
You get each series wrapped inside their feature name .bars
, .lineSeries
. Then it doesn't matter if the index resets because you still have a way of scoping for the item you are looking for.
from d4.
Oh the issue is not that there are duplicate classes, it's that there is no way to target a series by it's index without knowing what type of feature it is.
The benefit of this is to allow for a consistent color progression on charts that share a stylesheet but display data differently. i.e. The first series is always red the second is always blue the third is always green, irrespective of the type of series.
from d4.
Got it ok, thank you for the explanation; let me think this one over. It seems like a solvable problem.
from d4.
@yanofsky would applying an index of the render order help so:
<g class="chartArea">
<g class="bars"><g class="series0 value">...</g>
<g class="lines"><g class="series0 value">...</g>
</g>
would become:
<g class="chartArea">
<g class="bars" data-render-index='0'><g class="series0 value">...</g>
<g class="lines" data-render-index='1'><g class="series0 value">...</g>
</g>
from d4.
The index needs to be applied to the series's g
not the feature's g
there could be multiple line/column/dot series and each should have their index
<g class="chartArea">
<g class="bars>
<g class="series0 value render0">...</g>
<g class="series1 value render2">...</g>
</g>
<g class="lines" data-render-index='1'>
<g class="series0 value render1">...</g>
<g class="series1 value render3">...</g>
</g>
</g>
The way you have described above would also be inconsistent with the way D4 indicates series index and item index, right?
from d4.
ok how about this, what if I add a generic css class for feature
and series
to each element.
<g class="chartArea">
<g class="bars feature">
<g class="series series0 value render0">...</g>
<g class="series series1 value render2">...</g>
</g>
<g class="lines feature" data-render-index='1'>
<g class="series series0 value render1">...</g>
<g class="series series1 value render3">...</g>
</g>
</g>
then you could guarantee the same colors per series regardless of the returned data index using CSS like this:
first series is always red:
.feature .series:nth-of-type(1)
{
border:5px solid red;
}
second series is always blue:
.feature .series:nth-of-type(2)
{
border:5px solid blue;
}
Would something like that work for you?
from d4.
did you intend to leave the renderX class in the example above?
wouldn't .feature .series:nth-of-type(2)
select render2
?
The intention is to able select in order render0
, render1
, render2
, render3
from d4.
@yanofsky sorry no i didn't mean to leave renderx
in.
the idea was that using CSS you could select the first element within a feature for example. This would mean that you could get consistent color across features if the series order is consistent.
Does that make sense?
I am trying to keep the series themselves unaware of the larger ordering within the data array. Their responsibility i believe is to order based on the data they are provided only. Otherwise I believe there is a violation in the separation of concerns.
from d4.
Thats probably true. Like I said in the first post, this can be achieved in afterRender, so not a big deal, if you don't want to roll into D4
from d4.
@yanofsky ok will add the generic "feature" and "series" classes to each feature this way you can still style things with CSS and without the need of an afterRender call. I'll update an example on the demo site as well.
from d4.
Related Issues (20)
- Waterfall charts do not respect min/max of the chart domain.
- Dual-axis capability on a basic chart HOT 10
- Transitions broken on the donut chart example HOT 1
- Scales shouldn't auto-nice without an option to prevent it HOT 1
- Method to change stack order of elements HOT 7
- Add Padding method make distinct from Margin HOT 8
- Dual-axis capability breaks when using groupedColumnSeries HOT 6
- Negative label values are not displayed properly
- Refactor as node module HOT 7
- API or documentation for scale nicing HOT 9
- Attempt to make the svg more responsive to resizing
- d4.js:1172 Uncaught ReferenceError: d4 is not defined HOT 3
- License Missing HOT 1
- Throws reference error when using Browserify (assuming will also throw error with other bundlers?) HOT 2
- Cannot read property 'ordinal' of undefined HOT 12
- missing [week,hour,0] data result wrong graph for punch-card example
- [enhance] add line for punch-card
- wrong order punch-card data result wrong graph for punch-card example
- Example links in documentation are broken
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d4.