d3.js | 易学教程

d3 bar chart obscured in firefox but not in chrome

阅读更多关于 d3 bar chart obscured in firefox but not in chrome

问题 I have strange case with d3 bar chart. I am able to see it fine with chrome, but in firefox it behaves as if some element is overlaying some part of it. But when I viewed the page in 3D in firefox it shows me the rectangles but they are just not visible on page. I am including the generated HTML generated with d3, which in chrome and firefox behave differently. <script type="text/javascript" src="js/bar_chart.js"></script><script type="text/javascript" src="d3/d3.v3.min.js"></script></head>

TypeError: undefined is not an object (evaluating 'M.layout.force')

阅读更多关于 TypeError: undefined is not an object (evaluating 'M.layout.force')

问题 I'm new to JSNetworkX. I created a graph using the examples from jsnetworkx.org but I can only log it, I can't display it. So this is index.html file: <html> <head> <script src="https://d3js.org/d3.v4.js"></script> <script src="jsnetworkx.js"></script> </head> <body> <script src = "script.js"></script> </body> </html> And this the code written in script.js : var G = jsnx.completeGraph(6); console.log(G.nodes()); jsnx.draw(G, { element: 'body', weighted: true, edgeStyle: { 'stroke-width': 10 }

D3.js how to make the lines not go inside the arc of a donut chart

阅读更多关于 D3.js how to make the lines not go inside the arc of a donut chart

问题 I want to make a donut chart with text labels as per this example: However, I dont want the lines to enter into the inner area of the arc. I just want them to touch the circumference of the arc without entering it. Does D3.js provide any ready made functions to find out the center of the arc circumference or is there any other way using SVG to modify the lines. 回答1: Probably the easiest way will be to rearrange the order of the elements. Because SVGs elements will be drawn in document order

How to set width to x-axis label?

阅读更多关于 How to set width to x-axis label?

问题 If the x-axis label is long, it is getting overlapper on the next label like this. How do I set a width to it so that it appears as in the snapshot below? x-axis code: var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickSize(10,10); jsFiddle 回答1: I couldn't do the exact thing what's there in the image. But i found this from this link. Wrapping the x axis labels using a custom function. Hope this helps. :) 来源： https://stackoverflow.com/questions/21874959/how-to-set-width-to-x-axis-label

d3.js mouse events not working

阅读更多关于 d3.js mouse events not working

问题 I have the following problem: I made a force graph containing of only nodes rendered as circles. Everything worked fine, I could change the color on hover, click on them and delete some. I wrote this function to get the desired behavior depending on which data value is passed. It worked this morning but when I tried to show a friend what I had made suddenly the interaction stopped working completely. I don't get any error messages. Somehow something is wrong with the .on(mouseover) .on

d3 - Is there any possibilities of adding brush event to difference chart?

阅读更多关于 d3 - Is there any possibilities of adding brush event to difference chart?

问题 This is the chart I'm trying out. I want to add the brush event and zoom-in and zoom-out like we have in this chart. Here's the code which I'm still trying to plot a brush event. This is the first time I'm doing this referring to this site. Any help will be very much useful for me. Thanks in advance. EDIT : I almost managed to do it. Now I have some problem with the line. When you filter the chart in the fiddle you can see it. Above and below classes are fixed and it's not getting changed on

d3 quantile scale force first quantile

阅读更多关于 d3 quantile scale force first quantile

问题 I'm building a heat map with a color gradient from green to red. I want cells with value 0 to be green, and values greater or equal than 1 to take the other colors. I'm building the scale this way : var colors = [ '#27C24C', '#7DB22E', '#D4A10F', '#F97C20', '#F35F40', '#FF0000' ]; var colorScale = d3.scale.quantile() .domain([0, d3.max(data, function (d) { return d.value; })]) .range(colors); But this returns me the following quantiles : [239.16666666666677, 478.3333333333332, 717.5, 956

Manipulating d3 network diagram

阅读更多关于 Manipulating d3 network diagram

问题 I have a question regarding d3 network diagram. Say I have a simple, one like here in my jsFiddle enter link description here , diagram.And Id like to have a function, for example that deletes the middle circle and connects the first and the third one. Could someone please assist me on this ? [['L1', 'L2'], ['L2', 'L3']] Probably its not gonna be 'hard delete', but hiding or not showing ? Because also Id like to know a way how could i bring that middle, deleted circle back and the original

D3 Zoom resets scales selected via brushing.

阅读更多关于 D3 Zoom resets scales selected via brushing.

问题 I've made zooming and brushing working together. The only problem is, when I've set the particular period on X axis via brushing and then trying to use zoom (on mouse drag or mouse wheel), it resets previous selected scales, so zoom doesn't store x axis domain that was set via brushing before. zoomRight = d3.behavior.zoom() .x(xScale) .y(yRightScale) .scaleExtent([1,20]) zoomed = -> zoomRight.scale(zoom.scale()).translate(zoom.translate()) canvas.select("._x._axis").call xAxis canvas.select("

How to use the same scale on the y as the x but smaller because of the size difference?

阅读更多关于 How to use the same scale on the y as the x but smaller because of the size difference?

问题 I have the following code snippet: var data = [{ "Part": 956, "Pos": "P2", "Side": "A", "Number": 1, "PIN/PAD": "A1", "xdim": 0.022, "ydim": 0.08, "centrex": 1.775685039, "centrey": 0.1945, "Rotated": "TRUE" }]; var svgContainer = d3.selectAll('#svgContainer'); var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 1240 - margin.left - margin.right, height = 740 / 1.5 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.linear() .range(