d3.js

问题 I've been trying to create a page that uses JavaScript Templates which incorporate graphs made using d3.js to display information about each inventory item (in this example, I have an array of JSON blobs containing transistor data.) For example, I need boilerplate "Absolute Max Ratings" table followed by graphs like the impedance curve for a range of Gate Voltages. Here's what I have so far: var partData = [ { name: "IRF10", maxRatings: { vds: 200, vgs: 20, id: 2.1, pd: 36 }, impedanceGraph:

问题 I've been trying to create a page that uses JavaScript Templates which incorporate graphs made using d3.js to display information about each inventory item (in this example, I have an array of JSON blobs containing transistor data.) For example, I need boilerplate "Absolute Max Ratings" table followed by graphs like the impedance curve for a range of Gate Voltages. Here's what I have so far: var partData = [ { name: "IRF10", maxRatings: { vds: 200, vgs: 20, id: 2.1, pd: 36 }, impedanceGraph:

问题 I have a template, chartEditPreview , that runs a D3.js chart-drawing function once the rendered callback fires. It looks like this: Template.chartEditPreview.rendered = function() { drawChart(".chart-container", this.data); } Where .chart-container is the target div and this.data is the data for the object in the DB currently being accessed. Problem is, this.data often returns null , seemingly at random. It looks like this has something to do with how the publish/subscribe pattern works —

问题 So I've implemented the following excellent suggestion by Gerardo but then the following transition negates the two different font weights and they both end up bold Previous post: Portion of label bold - the rest not bold Code text.enter() .append("text") .attr("dy", ".35em") .style("opacity", 0.01) .style("font-weight", 700) .text(function(d) { return (d.data.NAME + ": "); }) .append("tspan") .style("font-weight", 200) .text(function(d) { return d.data.amount; }); text .transition()

问题 I need to align x-axis labels as shown in the snapshot below: I tried: .attr("transform", function(d) { return "rotate(-90)" }) But it rotated the whole axis/scale. How do I fix this? jsFiddle EDIT: I updated my code: svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "0em") .attr("dy", "0em") .attr("transform", function(d) { return "rotate(-90)" }); Now the labels are rotated to

问题 I am trying to upgrade this timeline chart code from v3 to v4. I have a bug with the brush I am unsure how to resolve. //current jsfiddle http://jsfiddle.net/0ht35rpb/173/ I am getting the error "Cannot read property '0' of undefined" I've tried to follow this example https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 are the brush properties different? The extent properties still valid? //brush var brush = d3.brushX() //.x(x) .on("brush", display); function display() { var rects,

问题 D3 newbie. How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below. I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs. { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "width": 1200, "height": 900, "data": { "url": "data/seattle-weather.csv" }, "mark": "bar", "encoding": { "x": { "aggregate": "count", "type": "quantitative" }, "size": {

问题 I've been struggling the past few days to optimize performance on a D3. I'm using a line generator on the SVG and would like to calculate only one time the function used in the x and y . For example: d3.line().curve(d3.curveLinear) .x(function(d){ return Math.sqrt(d) } .y(function(d){ return Math.sqrt(d) + 2) I I would like to save the result of Math.sqrt(d) and compute only one time. Does anyone have any suggestions? 回答1: You could store the result in your first function, and use it in the

问题 I've been struggling the past few days to optimize performance on a D3. I'm using a line generator on the SVG and would like to calculate only one time the function used in the x and y . For example: d3.line().curve(d3.curveLinear) .x(function(d){ return Math.sqrt(d) } .y(function(d){ return Math.sqrt(d) + 2) I I would like to save the result of Math.sqrt(d) and compute only one time. Does anyone have any suggestions? 回答1: You could store the result in your first function, and use it in the

问题 Ive looked and read all i could suck in, but im still having trouble with this Centroid. This is somewhat similar to another question of mine, but this is much more precise. I need to put text / image on the centroid of these regions: The svg data is already in my html file in the format like this: So i need to select a path, and use the centroid function on the d attribute, and then place a dot/text/image etc. Ive attached a JSFiddle to see all regions, dont mind the class´s/id´s. <svg id=