d3.js,transition , Transition partition arcs back to original angles


Transition partition arcs back to original angles

Question:

Tag: d3.js,transition

How can I transition arc angles, initially defined by d3.svg.arc(), back to their original values when using d3.layout.partition?

I am trying to store the initial startAngle and endAngle values d.x and d.dx somewhere so that I can transition back to them at a later state. However, I do not know:

  1. At what point d.x and d.dx are initialized, whether in d3.svg.arc() or when the arc paths are actually appended.
  2. How to bind d.x and d.dx to the elements when I am using a partition to render them.

Normally I might bind the initial startAngle and endAngle to the elements with datum(). I believe I am looking for something similar to:

selectAll('path').data(function(d) {
    return partition.values({
            'initialStart': d.x,
            'initialEnd': d.dx
        }).nodes(d)
    });

Answer:

In principle this is the same as transitioning pie charts, where you need a custom tween function to get the animation right. For this it is necessary to save the original value in a separate attribute -- in your case you can do the same thing.

Attributes are set when the layout is run; this is completely independent of the rendering and appending elements to the DOM.


Related:


How to rename fields to get into json hash


ruby-on-rails,ruby,json,d3.js
I am trying to rename columns once they come out of a database query so I can get them into the correct format for a d3.js graph. This requires the fields to be named source,target,value. def self.including_relationships User.select(:follower_id,:followed_id,:value) #How do I rename the fields from the line above to the...

Javascript D3.js drag a chart out of its svg Element


javascript,svg,d3.js
I want to make chart, that you can not drag out of its svg element. I'm doing this at the moment like this jsfiddle As you can see, you can zoom and drag this freely. What i want is this: If you drag it for example to the right and...

Wiring events for reusable d3 time slider


d3.js
I am trying to convert this time slider d3 block to a reusable module. As you can see in jsfiddle, the brush event is not being called. How do I wire up d3 brush event for this module correctly? Here is what I have so far jsfiddle link Code: (function...

d3.max didn't get the correct value [duplicate]


javascript,d3.js,max
This question already has an answer here: D3.js scale returning wrong values from dataset 1 answer I am using d3.js to render some data and the data set is a csv file called bar-data.csv like this: date,value,duration www.sina.com,53,100 www.baidu.com,165,2000 www.qq.com,269,690 www.youku.com,421,224 www.facebook.com,405,345 www.apple.com,376,777 www.cnn.com,359,298 www.cctv.com,433,333 www.google.com,455,500 www.boston.com,670,274 However when...

Fragment Transactions with transition - Unique transitionNames are required


android,transactions,fragment,transition,android-transitions
I want to go from a list view to the detail view and therefore, I use following OnClickListener in my list: @Override public void onClick(View view) { Bet bet = (Bet)view.getTag(); FragmentManager fm = getActivity().getSupportFragmentManager(); BetDetailFragment f = BetDetailFragment.create(bet); String tag = f.getClass().getName(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move));...

Data Join with Custom Key does not work as expected


d3.js
I am plotting some points using d3. I want to change the shape off all the points based on some condition. The join looks a bit like this: var data=[{x:10,y:10}, {x:20, y:30}]; var shape = "rect"; ... var point = svg.selectAll(".point") .data(data, function(d, idx) { return "row_" + idx +...

d3.js example works on example website but not on my server?


javascript,d3.js
I copied the html and tsv example from this page directly http://bl.ocks.org/mbostock/3884955 over to my server, but when I access it on my server, all I see is the y-axis. There are a bunch of errors in the javascript console: Error: Invalid value for <path> attribute...

Inserting a line break in text element in d3


javascript,d3.js
Referring to this graph, I would like to insert a line break in the text value for each data-point var labels = svg.selectAll('text') .data(monthlySales) .enter() .append('text') .text(function(d) { return d.stock + "\n " + d.count; }). I currently have something like the above. It does not insert any line break...

How to smoothly load 200MB data to browser for visualization?


javascript,d3.js,leaflet,data-visualization,kibana
The 200MB data is collected among 300 days, about 600kb daily. Currently I use d3.tsv to load one file containing all data, and then use setTimeout to loop through each day. But the question is to load 200MB data to client's browser, it can take a few minutes... How to...

D3js Bind path `d` attribute to data


javascript,svg,d3.js
I'm trying to find the proper way to dynamically generate a path. I'm following DashingD3js' pattern for creating SVG Paths with D3js. My question is, apart from checking each index in the accessor function and manipulating the value, and apart from creating variables that represent specific points that I want...

Why d3js exit().remove() don't work?


d3.js
I'm new to d3js, in my understanding. // links is an array and id is unique key var pathData = paths.data(links, function(d) {return d.id;}); pathData.enter().append('').attr() ... // in there will be delete all the duplicate items pathData.exit().remove(); But in my code, it recreate a node. Here is my full code...

Change axis displayed value in D3


d3.js,label,axis
I would like to change the value of the y-axis in my graph, such as, instead of displaying [0,18], it displays [-18,0]. My initial code for the axis is: var y = d3.scale.linear().range([height, 0]); var yAxis = d3.svg.axis() .scale(y) .orient("left"); and I tried to modify it like this: var yAxisInv...

Creating SVG elements dynamically


javascript,svg,d3.js
I am trying to create some circles in d3js dynamically, But for some reason it fails. My requirement is to show two small circles on the rectangle when I hover the rectangle. on the mouse out event circles should hide. I tried to it by creating a rect object and...

Query SQL data in Flask to use for charting without using the app.route decorator [closed]


python,sql-server,d3.js,flask
I am trying to query a SQL server in Flask, so that I can plot the data using d3.js. The way I've seen some people doing it (e.g. here) seems to be like this Create a function that retrieves the data Use the @app.route(/get_data) decorator Use the URL in d3.js...

Creating a sunburst diagram with dynamically chosen data source using D3


javascript,d3.js,sunburst-diagram
I am trying to create an interactive sunburst diagram using D3, where the user can select a data source from a dropdown menu. Once the data source is selected, any existing sunburst would be erased and redraw using the new data. This is based off the D3 example called "Sequences...

D3.js Rotate Vertical Bar Graph Labels


javascript,html,d3.js
I'm new to D3.js and using following example from D3.js to create a simple dashboard for one of my web application. http://bl.ocks.org/NPashaP/96447623ef4d342ee09b My requirement is to rotate top value labels of each bar vertically by 90 degrees. I changed following method by adding "transform" attribute. Then the labels do not...

How to achieve “flying Arcs” as link in the force layout of D3.js


svg,d3.js
Please suggest how to achieve the flying arcs in the force layout of d3.JS. As in the image

Plotting trend line with actual values in d3 line chart with angular


javascript,angularjs,d3.js
I am trying to plot actual values along with trend line using angular and D3. I read many tutorials but couldn't understand how we can access muliple variables of controller in d3. I have following data in controller: $scope.salesData=[ {hour: 1997,sales: 205000}, {hour: 1998,sales: 305000}, {hour: 1999,sales: 405000}, ]; $scope.lrResults...

How can I display greek letters in D3 svg.text objects?


javascript,svg,d3.js
I am using D3 and want to add the greek letter delta. This is in the tag of my HTML: <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> This is where the problem lies: 'bars' is a variable that stores a selection of class '.bar' and...

D3 how to remove tick dots from opaque scale


javascript,html,css,d3.js
I have d3.scale.linear object. Using css I made that scale opaque: .axis .domain { visibility: hidden; } .axis .halo { fill: none; stroke: #ccc; stroke-opacity: .5; stroke-width: 17px; } (example code taken from http://bl.ocks.org/mbostock/6452972 ) as you can see, there are still some dots left from scale ticks. I tried...

Embed D3.js with iframe


javascript,html,iframe,d3.js
I'm trying to create an iframe from JavaScript and embed D3 with in the iframe.like this var iDiv = document.createElement('div'); iDiv.id = 'block'; document.getElementsByTagName('body')[0].appendChild(iDiv); var target = document.getElementById("pp12"); var container=d3.select("#block").append("svg") .attr("width", 200) .attr("height", 200) .style("border", "1px solid black"); var iframe = document.createElement('iframe'); iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(iDiv); document.body.appendChild(iframe);...

Combining Bivariate Graph with Line Graph in a single chart


javascript,d3.js
I am facing a difficult task in combining the Bivariate Area Graph with Line Graph in a single graph d3.js. If I am successful with the bivariate area graph i am not able to draw a line chart in the same graph and vice versa. Either one is working for...

Get Angular to action ng-if in new elements generated by d3.js


javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

What am I misunderstanding about the d3 enter() and exit () selections?


d3.js
I'm learning D3. In this example, I'm adding paragraphs, using a simple list of numbers as data. I try to do the following things: Start with a list of 5 elements. When I call update(), I think the enter selection should contain 5 paragraphs and the exit() selection should be...

Calculate absolute position for d3 graph nodes


javascript,d3.js
I have a d3 force layout. Each node in this force layout has a label, which is a <div> code(can have table inside) and should follow it all the time. I defined the <div>'s position to be absolute and set their position like this: var updateNode = function() { label_xOffset=10;...

how to create a stacked bar chart with images in d3


javascript,d3.js,stacked-chart
i am trying to create a stacked bar chart with images on each rectangle and it was creating images separately in the body, can someone please help me in it. the output of my code is showing images in an another g class i need those images to be displayed...

dc.js: ReduceSum with multiple CSVs


javascript,d3.js,dc.js,crossfilter
This is a follow-up to another StackOverflow problem with creating charts with multiple CSVs into a single dc.js dashboard. I followed the instructions and my charts are working. However, what is not working is the numberDisplay elements. What I'm suspecting is that since I'm tabulating the totals of two CSVs,...

Responsive axis with percentage coordinates


javascript,svg,d3.js,graph,charts
In an attempt to build a responsive scatter graph with d3.js, I'm using %-based coordinates in a 100% x 100% svg element. How can I .call(axis) and get it to layout the axis using % and not px values, so that they always fit the svg and the plotted data?...

Crossfiltering of JSON data by the most recent time


d3.js,crossfilter
Hi i was facing problem with filtering out the most recent data from my data file. I have the following data var data= [ {"id":1,"speed":50,time:10:51.30}, {"id":1,"speed":40,time:10:51.40}, {"id":1,"speed":60,time:10:51.50}, {"id":1,"speed":55,time:10:51.55}, {"id":2,"speed":55,time:10:51.50}, {"id":2,"speed":65,time:10:51.58} ] I want to filter out the data to visualize or show the data with most recent time. So my...

Add a “Select All” checkbox to lists of checkboxes that update an array of objects


javascript,jquery,checkbox,d3.js
I have two lists of checkboxes (there will be additional lists later), for example: <ul> <li><input type="checkbox" onchange="handleChange()" name="job" rel="it-manager" value="IT-Manager" id="IT Manager" class="selectedId" checked> IT Manager</li> <li><input type="checkbox" onchange="handleChange()" name="job" rel="consultant" value="Consultant" id="Consultant" class="selectedId" checked> Consultant</li> </ul> <ul> <li><input type="checkbox" onchange="handleChange()"...

Svg how to position elements lo left and right like with floats?


javascript,svg,d3.js
I'm building a organizational chart with the help of dagre-d3,js and d3.js. Its svg based so every person in the chart needs to have some kind of a employee card (or call it profile card) This card needs to show the Persons name, his group and have 2 buttons, one...

D3.js Enter, Update, Exit issue


javascript,d3.js,charts,updates
I have a relatively simple barchart. I want to .transition() between datasets with an .on("click") event. What I'm getting is a complete redraw of an additional chart appended to the DOM id, instead of removing the original chart and transitioning or replacing it. I think I'm misunderstanding how to correctly...

dimple.js - keeping scale after reloading new data


d3.js
In d3.js I can load a dataset and filter it on 'year'. This opproach gives me the possibility to calculate my d3 scales and vertical axis based on my complete dataset's max y value. My aim is to get the graph to be visually comparable when changing view from one...

dc.js - Stacked bar chart with empty bin filter displaying in strange way


d3.js,dc.js,crossfilter
I'm trying to have a stacked bar chart and remove empty bins, the bar chart doesn't seem to display properly. It's adding whitespace within the bars themselves. The filtering is working fine. Probably best explained by having a look at this fiddle - http://jsfiddle.net/northside45/xdcvr2kf/ My filters look like this var...

Lightbox with transition


css,css3,transition,lightbox
I wanted to do a smooth transition of a fullscreen lightbox, my actual code is <a href="#_" class="lightbox" id="img1"> <img src="images/photo.jpg"> </a> And my style: .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { max-width:...

Nested JSON structure to build side-by-side d3.js charts


javascript,json,d3.js
I'm currently stuck on how to traverse a JSON structure (I created) in order to create side-by-side donut charts. I think I've created a bad structure, but would appreciate any advice. I'm working from Mike Bostock's example here: http://bl.ocks.org/mbostock/1305337 which uses a .csv file for source data. In that example...

D3 bar chart bar text labels not visible properly


javascript,d3.js
I have a stacked bar chart in d3.js For every stacked bar i have corresponding text value showing near stack itself. problem is, some text values displaying are hidden behind bars, where as some are visible over bars. I want all text to visible over my bars. my code looks...

3D Lines disappear sometimes


javascript,d3.js,3d,three.js
I am building 3d line chart from data here is the code Demo the part of code that generate line is parentTransform = new THREE.Object3D(); var _color = d3.scale.category10(); for (var i = 5; i > 0; i--) { var material = new THREE.LineBasicMaterial({ // color: 0x0000ff,linewidth: 30 color: _color(i),...

Javascript on my page not working in iOS


javascript,ios,d3.js
I have been playing around for a few hours on my page trying to get the javascript to load on iOS. Both charts using chartjs and D3 will not load on a mobile browser (safari on ipad and iphone) On desktop browser it works fine, and i have no JS...

D3 accessing the update selection for nested datajoins


javascript,d3.js
I'm rendering a table of data using D3, and have successfully managed to make the initial render work: var data = [ [1,2,3], [1,2,3], [1,2,3] ]; render(data); function render(data) { var container = d3.select('#container'); var table = container.select('table'); if (!table.node()) { table = container.append('table') .classed('legend', true); } // create the...

How to calculate the data for yaxis manually?


d3.js
I'm using d3.js with Reactjs and trying to let Reactjs handle all the dom manipulation and let d3.js just do the math for the graph(s). This is fairly straightforward, except that I'm having difficulty with the yAxis. Usually (when not using Reactjs) I create the yAxis like this var yAxis...

Icon not displaying correctly


javascript,css,d3.js
I have some D3 code which creates rectangles, put some text into it and connects each node based on some logic. Now, for each node I want to display an icon if the execution_type of that node is 'Manual". The icon needs to be similar to this example: http://output.jsbin.com/eFAZABe/6 After...

Input transition


html,css,transition
I try to animate my search button. When you click on it, it should expand and slide to the side. The animation is no problem in css, but in front of the search bar is a div, which does not follow the expanding search bar. <form> <div class="test"></div> <input type="search"...

unable to get d3.layout.stack to fill out d3.svg.area


javascript,d3.js
I am trying to use a d3 streamgraph with my own data instead of the random data provided in the example (http://bl.ocks.org/mbostock/4060954). var d3Data = [ {"label" : 0, "value1":105, "value2":95}, {"label" : 1, "value1":95, "value2":115}, {"label" : 2, "value1":85, "value2":75}, {"label" : 3, "value1":75, "value2":175}, {"label" : 4, "value1":85,...

x >= x pattern in JavaScript


javascript,d3.js
When reading source of D3.js I saw x >= x pattern. If it is for detecting NaNs among numbers, why not just isNaN(x) or x == x? Source, where I encountered it: d3.min = function(array, f) { var i = -1, n = array.length, a, b; if (arguments.length === 1)...

Is there a javascript command for 'only run when the mouse is over but stop when its not over'


javascript,d3.js
I know about onmouseover but I have a circle on a page that lights up when the mouse hovers over it. But it stays lit when the mouse comes off it until it hovers again, when it turns off again. Its really irritating. Is there a one instruction to trigger...

data.key is undefined: how to parse json data


javascript,json,d3.js
I want to draw rectangles in proportion to the size of cities. But I keep getting stuck with parsing the data. I can take out the keys of the data, but when I use the keys by doing data.key it gives me "undefined". I think the problem lays in the...

Bars on D3 Bar Graph not showing up


javascript,d3.js,bar-chart
I've been staring at this code for hours now and maybe it's obvious or just needs a fresh set of eyes, but I am desperate to figure out why the bars on the graph aren't showing up?? Here is the fiddle for it: http://jsfiddle.net/u7zs3jwo/1/ Here's the JSON: var bardata =...

d3.js grid moving around when dragging and zooming


javascript,svg,d3.js,gridlines
I tried to copy the behavior of the grid displayed here. The code I have is here Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not. I suspect the problem is around this part : function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis);...

change axis color dimple


d3.js,dimple.js
I have a very simple line chart in dimple. I want to change the x and y axis colour to white. var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset; var chart = new dimple.chart(svg, dataset); var x = chart.addCategoryAxis("x", "Attempts"); //x.style ("fill","red") var y = chart.addMeasureAxis("y", "Value"); y.showGridlines = true; x.showGridlines =...