Overly complicated?

[jredd]

Is it just more or do transitions seem overly complicated now? I liked the old method of just being able to transition a selection... I can't even get the new method to operate, and the examples i've seen on the web make you jump through hoops to do a simple transition and they still don't work. I'm giving up, spent hours trying to get them without any luck. I regret upgrading to v4

[mbostock]

I’m not sure what you mean. What examples? What hoops? The transition API is largely unchanged from v3; you still call selection.transition to create a transition from a selection. (Maybe you’re looking at the examples that demonstrate infinite looping animations?)

If you want help, I recommend using Stack Overflow as described here: https://gist.github.com/mbostock/7f063e44c57ecb5828dd5643e61f92d3 The D3 slack is also great if you have questions and want to talk to other people about D3 in real-time.

Make sure to include code that demonstrates what the problem is or what it is you want to do. I understand you are upset, and I am sorry for that and want to help, but unless you provide context to explain the source of the confusion, there is no way for me to help you.

[jredd]

Sorry for outburst but selection.transition() does not work for me. If the below select is supposed to still work it doesn't for me.

select('#elementID').transition()

I get

d3_selection_1.select(...).transition is not a function

I got around it by doing

var t = d3.transition()
    .duration(700)
    .delay(100)
    .ease(easeLinear);

t.select("#elemntID")
    .attr("width", 0);

btw importing transition from d3-transition will not let me accomplish the above, or well 100% of the time doesn't let me. I have to do d3.transition() to get consistency in the transition actually executing. I do have multiple graphs running on the page, all built using the same code they just plot different data sets.

Another transition instance i'm trying is when i do a mouseover of an element. I want to be able to transition an svg circle to a visible state so in

.on('mouseover', function(d) {
    d3.transition()
      .duration(300)
      .ease(easeLinear)
      .select(this)
      .style("opacity", .9);
}

The above doesn't work for me, "this", in this case is just a simple circle svg element.Had to give up in the end on trying to transition that element since I didn't want to generate unique id's for each circle to then just be able to select them for a transition. if I did a regular select outside of transition d3 would select the element though and turn it into an object. Below is the error I receive when trying to select the element when doing d3.transition().select()

Failed to execute 'querySelector' on 'Element': '[object SVGCircleElement]' is not a valid...

Sorry to say that none of the "similar" functionality that was available in v3 seems to work for me with v4. So I just ended up frustrated, sorry for venting the way I did without posting context.

[mbostock]

If selection.transition is undefined, it means there’s something wrong with your bundler configuration. For instance, I’m not sure that Webpack observes the package.json’s jsnext:main or module field by default, so it’s possible that even by importing d3-transition you’re defining d3.transition, but the d3-transition has its own internal copy of d3-selection and is not defining d3.selection.prototype.transition.

The simplest thing to do is to use the default bundle (d3/d3). Otherwise, depending on what bundler you’re using, make sure that it’s configured correctly to pull in the ES2015 source from each respective dependency and not the pre-generated UMD bundles. I also have examples of custom bundle generation using Rollup.

[jredd]

Know of any guides that properly demonstrate how to install d3 and all it's packages into an angular 2.0 application that uses typescript? Searching for the topic yields many different results with many different opinions on how to properly install d3. I've obviously not installed it properly even though web storm shows everything connecting properly. Because of the nature of the project I'm working on I have to keep all dependencies locally.

[jredd]

Dropping usage of the individual imports from the separate modules and just using the regular d3 library has fixed the issue... Wish I had known this from the beginning, so much wasted time.

[mbostock]

I’m not personally aware of any guides for Angular; I’d try asking on Stack Overflow, the d3js Slack, or the d3-js Google group. See links from Asking for Help.