I wouldn’t have expected this to work, but it looks like D3 will sub-select any element that is a child of the selection and matches the selector – so this works: d3.select(this).selectAll(‘div > ul’); See http://jsfiddle.net/g3aay/2/
I ended up with one of the Lars Kotthoff’s advices. Every time when I call(axis) I also adjust text labels. Here is simplified code: function renderAxis() { axisContainer .transition().duration(300) .call(axis) // draw the standart d3 axis .call(adjustTextLabels); // adjusts text labels on the axis } function adjustTextLabels(selection) { selection.selectAll(‘.major text’) .attr(‘transform’, ‘translate(‘ + daysToPixels(1) / … Read more
for remote data.json replace : d3.tsv(“data.tsv”, function(error, data) {…} with : d3.json(“data.json”, function(error, data) { console.log(data); // this is your data }); for local data: var myData = { {date:’2013-05-01′, frequency:99}, {date:’2013-05-02′, frequency:24} }; function draw(data) { console.log(data); // this is your data } draw(myData);
In order to make angular and other frameworks play nice is to wrap the “other” frameworks using directives. http://docs.angularjs.org/guide/directive The thing that you want to do is to tell angular when data has been updated by the “other” frameworks. If angular doesn’t need to know, then your task is simpler. Here is an example that … Read more
Assuming that you have Mike Bostock’s standard margins defined and you have defined a linear scale for the y-axis the following code will create horizontal gridlines without using tickSize(). svg.selectAll(“line.horizontalGrid”).data(yScale.ticks(4)).enter() .append(“line”) .attr( { “class”:”horizontalGrid”, “x1” : margin.right, “x2” : width, “y1” : function(d){ return yScale(d);}, “y2” : function(d){ return yScale(d);}, “fill” : “none”, “shape-rendering” : … Read more
You need to bind data to the nodes (rectangles and text elements) that make up the legend. Currently you get an error when trying to style rectangles: Uncaught TypeError: Cannot read property ‘1’ of undefined The reason: there’s no bound data legend.append(“rect”) /*…*/ .style(“fill”, function(d) { // d <—- is undefined return color_hash[dataset.indexOf(d)][1] }); Notice … Read more
Yes. First I would restructure your data for easier iteration, like this: var series = [ [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}], [{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}], [{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}], [{time: 1, value: … Read more
You don’t need to call each() or filter()… The attr() function will do this for you internally. Just call it with a function instead of a value, and have that function return the desired value for each datum, or null if the attribute is not desired for a particular datum, like so: … .attr(‘data-class’, function(d) … Read more
<script>$(function(){var svg = d3.select(“#chart”).append(“svg:svg”);});</script> <div id=”chart”></div> In other words, it’s not happening because you can’t query against something that doesn’t exist yet– so just do it after the page loads (here via jquery). Btw, its recommended that you place your JS files before the close of your body tag.
All the answers above misunderstood Øystein Amundsen’s question. The only way to stabilize the force upon it starts is to set node.x and node.y a proper value. Please note that the node is the data of d3.js, not the represented DOM type. For example, if you load nodes = [{“id”: a}, {“id”: b}, {“id”: c}] … Read more