d3.js,transition,axis-labels , transitioning rotated axis labels with D3

transitioning rotated axis labels with D3


Tag: d3.js,transition,axis-labels

I'm trying to create a graph that updates as new values are coming in. In order for the labels on the X axis to be readable I decided to rotate them slightly, so they don't overlap.

When there's a new value, it's being drawn in the graph, then the path (actually the container ) is translated to the left in a transition.

This is how i create the rotated axis labels:

            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", this.axislabelrotation);

this.axislabelrotation is:

function(d) {
    return "rotate(-35)" 

And this is how i transition the X axis:

    svg = svg.transition().duration(750);
    svg.select(".x.axis") // change the x axis
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", this.axislabelrotation);

Though now I have two issues:

  1. At the beginning of the transition the X axis labels jump down a few pixels, during the transition they go back up.
  2. Newly entered labels ("2015" in the example) are not rotated at the beginning of the transition, though rotate to the desired state during the transition.

Example: http://jsfiddle.net/esy6wk8n/2/


I'd suggest that you remove the transition on the dy and transform attribute.

This updated fiddle may help you with that: http://jsfiddle.net/esy6wk8n/4/

The changes are all in your update function.

    var no_trans = svg;
    svg = svg.transition().duration(750);

        .attr("transform", "translate(" + this.x(data[0].jdate) + ")");

        .attr("transform", "translate(" + this.x(data[0].jdate) + ")");

    svg.select(".x.axis") // change the x axis
            .style("text-anchor", "end")
            .attr("dx", "-.8em");
            //.attr("dy", ".15em")
            //.attr("transform", this.axislabelrotation);

            .attr("dy", ".15em")
            .attr("transform", this.axislabelrotation);

Basically, I have moved the update of the dy and transform attributes out of the transition, so therefore these values will be set straight away and not be changed as part of the transition, keeping the dy and the transform stable throughout the transition.


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

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...

Calculate absolute position for d3 graph nodes

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;...

Combining Bivariate Graph with Line Graph in a single chart

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...

Lightbox with transition

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:...

Bars on D3 Bar Graph not showing up

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 =...

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

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...

data.key is undefined: how to parse json data

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...

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

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...

Inserting a line break in text element in d3

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 rename fields to get into json hash

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...

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

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...

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

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...

d3.js grid moving around when dragging and zooming

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);...

Embed D3.js with iframe

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);...

D3 how to remove tick dots from opaque scale

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...

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

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...

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

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...

Wiring events for reusable d3 time slider

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...

Input 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"...

Crossfiltering of JSON data by the most recent time

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...

how to create a stacked bar chart with images in d3

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...

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

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()"...

D3.js Enter, Update, Exit issue

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...

change axis color dimple

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 =...

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

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...

D3js Bind path `d` attribute to data

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...

Creating a sunburst diagram with dynamically chosen data source using D3

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...

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

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...

Change axis displayed value in D3

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...

Icon not displaying correctly

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...

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

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...

Javascript on my page not working in iOS

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...

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

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,...

D3 bar chart bar text labels not visible properly

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...

dimple.js - keeping scale after reloading new data

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...

3D Lines disappear sometimes

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),...

Fragment Transactions with transition - Unique transitionNames are required

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));...

D3 accessing the update selection for nested datajoins

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?

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...

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

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...

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

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...

Data Join with Custom Key does not work as expected

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 +...

dc.js: ReduceSum with multiple CSVs

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,...

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

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}}' />...

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

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...

x >= x pattern in JavaScript

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)...

Creating SVG elements dynamically

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...

Responsive axis with percentage coordinates

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?...

D3.js Rotate Vertical Bar Graph Labels

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

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