3

I'm trying to make a custom chart starting with the Cumulative Line Chart http://nvd3.org/ghpages/cumulativeLine.html

I'd like to display data with origin being top left so I swapped the y range, and now the x axis is on top and I need to translate it to the bottom.

I'm trying to use the common d3js transform attribute

.attr('transform', 'translate(0,' + height+ ')');

as suggested here but it does not seem to be working!

I located this section in the cumulativeLineChart model (around line 350)

g.select('.nv-x.nv-axis')
   // .attr('transform', 'translate(0,' + y.range()[0] + ')');
      .attr('transform', 'translate(0,' + 300 + ')');   // my testing alteration

d3.transition(g.select('.nv-x.nv-axis'))
      .call(xAxis);

Y axis can't be translated either. I think it has something to do with the indexLine and the way the scope can be adjusted, but I may be completely off. In fact, I want to get rid of the interactive indexLine feature altogether...

Am I even modifying the right part of the NVD3 code?!

Any help would be GREATLY appreciated. I've spent hours and hours trying to get the whole thing work (occasionally running back and forth between nvd3 and d3), and I am stuck. Thanks!

CarvedBlock
  • 71
  • 3
  • It sounds like what you're trying to do would be much easier starting with pure D3. There're plenty of examples to get you started – Lars Kotthoff Jun 16 '13 at 10:36
  • Hi Lars. Thanks for the suggestion! I quite agree. I was using pure D3, but just could not get some advanced features working, and incidentally most of what I require and had troubles fiddling with (grouping by attributes and then selectively turning on and off parts of the dataset, rescaling both axes...) is already implemented in NVD3. If I can figure out how to customize the NVD3 source in the lack of documentation, I should be golden. PS:you are right in that specifically this problem is not even a problem using pure D3. – CarvedBlock Jun 16 '13 at 14:18
  • So when you say that it's not working, what do you mean? – Lars Kotthoff Jun 16 '13 at 14:54
  • Well, the visualization displays, but the axes stay put (on left and top). I just can't make the axes move in any direction. Adding the translation code does not break the whole thing but it does not seem to have an effect. – CarvedBlock Jun 17 '13 at 14:10
  • Did you check whether the translation is still there in the final result and not overwritten by something? – Lars Kotthoff Jun 17 '13 at 15:20

0 Answers0