Comments (12)
Perhaps someone could point me to an example that uses nested selections? I have to imagine there are some, this is such a common thing in D3.
from d3.chart.
You can find examples of nested selections in the "ticks" layer for this chord diagram and this bullet chart.
from d3.chart.
Wonderful, thanks!
So basically, sometimes you'll need to do appending within the dataBind
method, to get the selection right. This wasn't obvious to me, so maybe there's room for it in the docs somewhere.
PS these examples are nice, any reason they haven't made it to examples or charts yet? If there's anything I could do to help out, I think more examples like these would be really great.
from d3.chart.
Thanks for pointing to those examples, jugglinmike. I'm working on a grouped barchart similar to the one samselikoff linked to above, and I find that I need access to lifecycle events on both the individual bars, and the bar groups.
The method employed in the chord diagram only gives access to the most granular elements, and not the groups. ( I haven't figured out all the magic in the bullet chart yet, so hopefully someone can point out the way it's done there.)
Is there a way of getting lifecycle events on all levels of nested selections?
from d3.chart.
I thought the same thing as Sam after I downloaded the examples. I wanted the missing bar chart from the miso project site since I landed there first and got hooked ;-D
So I did some house cleaning on examples page and also included the 2 charts featured on the miso site. Along with a title, each example could also include a brief, 1-2 line description as I'm not sure the difference between all the chord examples - they're cool though.
If you like, I'll fork and commit this examples branch work.
from d3.chart.
@headwinds this has been on our agenda for a while now. A pull request would be welcome :)
from d3.chart.
done. I tried to create an "examples" branch without realizing you had already created one [love your last checkin comment on it btw ;-D ] so I just merged and committed it on my forked master.
from d3.chart.
I've been running into issues lately related to this.
@jugglinmike, in the examples the parent selections are basically only containers for the nested selections. But sometimes, you need to perform data-driven transformations for both parent and nested selections, during various lifecycle events. Is there a way to do this currently without abusing d3.chart? (By abuse, I mean putting data joins and enter
calls in many different places.)
from d3.chart.
@samselikoff Not really--let me know if you come up with anything nice!
from d3.chart.
@samselikoff @headwinds @ccblaisdell Has anyone come up with a solution to this issue? I'm putting together a set of d3.chart components, several of which use nested selections (tables, matrix charts). My current solution is abusive to d3.chart (as defined by @samselikoff two comments above ;-) ) but I'm looking for something that complies with the d3.chart paradigm. If someone has already invented this wheel, that would be great!
from d3.chart.
@samselikoff , @girlwithglasses, @jugglinmike I'm currently handling this as follows:
You create a layer for the groups (noting special here):
this.layer("states",
this.base.append('g').attr('class', 'states'),
{
dataBind: function(data) {
return this.selectAll(".state").data(data);
},
insert: function() {
var chart = this.chart();
return this.append('g').classed('state',true);
},
events: {}
}
);
Afterwards you create a layer that holds all the bars from all the states. It's important to create the sub layer below your 'base' layer, it needs to be rendered first so you can use the created elements to attach new elements to:
this.layer("ages",
this.layer('states').selectAll('rect'),
{
dataBind: function(data) {
var chart = this.chart();
var sel = chart.layer('states').selectAll('state');
return sel.selectAll("rect").data(data);
},
insert: function() {
var chart = this.chart();
return this.append('rect');
},
events: {}
}
);
This approach works and helps you attach life cycle events to each element but there are some things that feel counter intuitive. Below implementation of the sub-layer does not work but would feel somewhat more intuitive:
this.layer("ages",
this.layer('states'),
{
dataBind: function(data) {
var sel = this.selectAll('state');
return sel.selectAll("rect").data(data);
},
insert: function() {
var chart = this.chart();
return this.append('rect');
},
events: {}
}
);
I would expect to use this
in the dataBind
function as a reference to the states layer, ideally all the elements within that layer, omitting the need to do a selectAll('state')
on that layer.
Couple of remarks:
- I'm adding
this.layer('states').selectAll('rect')
as the second argument to my subLayer declaration but I'm pretty sure it's useless, as long as that second argument is a valid selection, it's more of a sanity-check type of deal to structure my code. - Would it be better to
attach
a d3.chart('barchart') to each state layer? Would that be possible? If so could someone provide some minimal example? - I've been using this approach with multiple levels of subLayer: subLayer having sub-subLayers... and this approach works without any problems, but I'd love to get some feedback from the creators as to how they feel about this approach. Or if they see any issues in implementing the 'more intuitive' approach I proposed above.
Any feedback is welcome!
from d3.chart.
@svdwoude I came up with the same strategy, although I migrated to kotojs, an ES6 fork of d3.chart, for various reasons, including being able to subclass layer
to create specific classes -- e.g. I have a generic AddUpdateRemoveLayer
, from which most other layers are derived, with methods for enter
(add
), merge:transition
(update
), and exit:transition
(remove
) events.
I dumped all my chart attachments and use layers instead, as I feel that attachments are a less flexible alternative. I think the d3.chart creators have a certain mental model of what a layer is (some of the other issues have an explanation of it), and I found it more useful to think of layers as containers for repeating or non-repeating presentation units, e.g. a chart axis; a table row; labels on a bar chart bar; etc.
from d3.chart.
Related Issues (20)
- Set 'new' chart width based on y-axis width
- Is there a hook to redraw the chart on window resize? HOT 5
- Release notes for version 0.2 HOT 4
- Question - Has anyone integrated this with Angular yet? HOT 1
- Is d3.chart still being developed/maintained/used? HOT 7
- Not deleted when data is updated. HOT 1
- to attach or to extend? HOT 1
- d3 dependency difference HOT 1
- Spam entry in http://misoproject.com/d3-chart/charts.html HOT 3
- compatibility with d3.js version 4? HOT 7
- How to properly enter/update/exit new data HOT 5
- Wrong link on the Api Wiki page
- misoproject.com suggests visitors "Buy this domain"
- d3.chart + requirejs HOT 8
- Idiomatic way to add x-axis, y-axis and tooltips HOT 5
- Assert that an added layer has .insert function
- Detect when a layer has been inserted HOT 4
- Where can I "short-circuit" the draw process? HOT 2
- `beforeDraw` hook HOT 7
- Uniform access HOT 2
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 d3.chart.