d3.js

问题 I'm trying to only show the node text on mouseover. When I mouseover the node, I have the opacity for the svg circle changing, but only the text for the first node showing up. I've figured out that this is because of how I'm using the select element, but I can't figure out how to pull the correct text for the node that I'm hovering on. Here's what I currently have. node.append("svg:circle") .attr("r", function(d) { return radius_scale(parseInt(d.size)); }) .attr("fill", function(d) { return d

问题 I am building a bar chart using nvd3's multiBarChart and need to adjust the position of rotated x-axis labels: var chart = nv.models.multiBarChart(); ... chart.rotateLabels(-90); I would like the column labels to not overlap the chart and be centered under each bar. I could select the labels after plotting the chart and adjust them but is there an easier way? 回答1: The best way I have found to handle this is to perform the rotation of the x-axis tick labels yourself. Why? Because NVD3 is not

问题 I'm using d3.stack to create a stacked area chart but I get an error if I have don't have an equal number of items in each layer. I'm starting with an array of data like this: [ {key:'Group1',value,date}, {key:'Group1',value,date}, {key:'Group1',value,date}, {key:'Group2',value,date}, {key:'Group2',value,date} ] and after I run it through nest() and stack() I end up with this format, as expected: [ {key: 'Group1', values: [ {key,value,date}, {key,value,date}, {key,value,date} ] }, {key:

问题 I want to make double click event on nodes. So I tried .on("dbclick",function(d){return "http://google.com");}); and .bind({"dbclick",function(d){alert("hello")} }); But all failed. Can anyone help me? Full codes are below. var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") //.on("dbclick",function(d){return "http://google.com");}); //.attr("xlink:href", function(d){return d.url;} .call(force.drag); //.bind({"dbclick",function(d){alert("hello")} }

问题 Drag and Drop Example I am trying to rewrite part of this example above to use in my code, specifically this piece: function centerNode(source) { scale = zoomListener.scale(); x = -source.y0; y = -source.x0; x = x * scale + viewerWidth / 2; y = y * scale + viewerHeight / 2; d3.select('g').transition() .duration(duration) .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); zoomListener.scale(scale); zoomListener.translate([x, y]); } However I am getting stuck since the v4

问题 I'm creating a table with d3 to be used by the FooTable jquery plugin and this requires having some data- attributes in the header row. But not all columns have all the data attributes and wondering if there is a way to do this. This approach sort of works, by adding all the possible data attributes and leaving some blank, but I'm sure it's not good practise. var th = d3.select(selection).select("thead").selectAll("th") .data(colspec) .enter().append("th") .text(function(d) { return d["data

问题 I'm creating a table with d3 to be used by the FooTable jquery plugin and this requires having some data- attributes in the header row. But not all columns have all the data attributes and wondering if there is a way to do this. This approach sort of works, by adding all the possible data attributes and leaving some blank, but I'm sure it's not good practise. var th = d3.select(selection).select("thead").selectAll("th") .data(colspec) .enter().append("th") .text(function(d) { return d["data

问题 I'm creating a table with d3 to be used by the FooTable jquery plugin and this requires having some data- attributes in the header row. But not all columns have all the data attributes and wondering if there is a way to do this. This approach sort of works, by adding all the possible data attributes and leaving some blank, but I'm sure it's not good practise. var th = d3.select(selection).select("thead").selectAll("th") .data(colspec) .enter().append("th") .text(function(d) { return d["data

问题 I am trying to draw a heatmap with d3 using data from a csv: this is what I have so far Given a csv file: row,col,score 0,0,0.5 0,1,0.7 1,0,0.2 1,1,0.4 I have an svg and code as follows: <svg id="heatmap-canvas" style="height:200px"></svg> <script> d3.csv("sgadata.csv", function(data) { data.forEach(function(d) { d.score = +d.score; d.row = +d.row; d.col = +d.col; }); //height of each row in the heatmap //width of each column in the heatmap var h = gridSize; var w = gridSize; var rectPadding

问题 I am trying to draw a heatmap with d3 using data from a csv: this is what I have so far Given a csv file: row,col,score 0,0,0.5 0,1,0.7 1,0,0.2 1,1,0.4 I have an svg and code as follows: <svg id="heatmap-canvas" style="height:200px"></svg> <script> d3.csv("sgadata.csv", function(data) { data.forEach(function(d) { d.score = +d.score; d.row = +d.row; d.col = +d.col; }); //height of each row in the heatmap //width of each column in the heatmap var h = gridSize; var w = gridSize; var rectPadding