d3.js-v4

问题 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

问题 The following d3.js (v4) interactive tree layout I've put together as a proof of concept for a user interface project is not behaving as expected. This is my first d3.js visualisation and I'm still getting my head around all the concepts. The snippet highlights the issue I'm struggling with. If you click on yellow node labeled "F: 3", I'd expect the children ("F: 4", "T: 5" and it's two links) to transition back to the real time x,y coordinate of "F: 3". However, it seems to only transition

问题 In D3 v4 I find that specifying stroke-dasharray as an attribute works as expected. On the other hand, specifying it through a style does not. Please see the code listing at the end of this note. According to the Mozilla Foundation (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes): "Using CSS In addition to setting attributes on objects, you can also use CSS to style fills and strokes. Not all attributes can be set via CSS. Attributes that deal with painting and

问题 In D3 v4 I find that specifying stroke-dasharray as an attribute works as expected. On the other hand, specifying it through a style does not. Please see the code listing at the end of this note. According to the Mozilla Foundation (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes): "Using CSS In addition to setting attributes on objects, you can also use CSS to style fills and strokes. Not all attributes can be set via CSS. Attributes that deal with painting and

问题 I have a very similar task as D3.js nesting and rollup at same time and solution provided by @altocumulus for d3.js v3 works perfectly fine for me (tested). However, I am using d3.js v4 across my website and I am having difficulties replicating the same approach with v4 - I am not getting the same results. Perhaps, because I don't understand the sumChildren function. Please feel free to provide a better or different approach on how to restructure the loaded csv file as json with subtotals at

问题 I am puzzling over why the following simple update pattern doesn't work. This follows the recommended General Update Pattern , as far as I can see. <script src="https://d3js.org/d3-selection.v1.min.js"></script> ... var dat = ["One","Two","Buckle my shoe"]; var sel = d3.selectAll("p.test").data(dat); sel.enter().append("p").classed("test", true); sel.exit().remove(); //update 1 ... doesn't work sel.text(function(d) { return d;}) The paragraphs get created fine, but the text isn't set. However

问题 I am having issue with special character not being displayed properly, I am generating a d3.js tree layout diagram via an angular JS directive, text is being added into the diagram by the directive but any special character is not displayed properly, instead of apostrophe I get ' and & instead of & etc... I have tried the use of a filter $filter('html')(d.name) with no luck app.filter('html',function($sce){ return function(input){ var value = input.toString(); console.log(input); var output =

问题 My JSON contains same node names in different paths, I would like to be able to open all children with the same name or has substring in their names. Tried this example: [Search Collapsible Tree], but it opens only one path. The idea is to implement search for substring and a if a path has a node that contains the search term, then, open (expand) that path. So, I replaced the Select2 to text input but the search is still limited to one result. 回答1: You just need to change tree search function

问题 I'm trying to display a map of a single state, with zooming and panning constrained to the boundaries of the state. It's mostly working, except for the panning constraint when the state path is scaled to fit a smaller container. I think this comes down to me not understanding what arguments to use for zoom.translateExtent (although I'm very new to this, so it could be something else). Live example on bl.ocks.org, with links to prior art. One notable thing is that I'm using a null projection

问题 here is my js fiddle: https://jsfiddle.net/DerNalia/3wzLv9yg/1/ I've been trying to interpret the code from here: Multiseries line chart with mouseover tooltip, but I just can't seem to get it working. This is what I have so far -- it's pretty much a copy paste. // append a g for all the mouse over nonsense var mouseG = svg.append("g") .attr("class", "mouse-over-effects"); // this is the vertical line mouseG.append("path") .attr("class", "mouse-line") .style("stroke", "black") .style("stroke