d3.js

问题 I am new to d3. I have been trying to solve this for some time, but I couldn't find any similar issues here. I am trying to create a grouped bar chart (something like https://bl.ocks.org/mbostock/3887051). This is a section of my current code: var width = "100%"; var height = "96vh"; var canvas = d3.select("body") .append('svg') .attr('width',width) .attr('height', height) .style("border", "2px solid black"); var y0 = d3.scaleBand() .paddingInner(0.1) .range([0, height]); var y1 = d3

问题 I'm trying to draw a heatmap using D3. So far I was able to draw one by modifying the code from http://bl.ocks.org/tjdecke/5558084. At the moment, my legend is only showing two colors; yellow (for value 0) and red (for value 1). I would like to display the legend showing all the color gradient from yellow to red and the value associated with each color. Can someone help me with this? Part of the code is shown below. Thank you // X-axis labels // This has to be generated dynamically loop_ids1

问题 I have a D3 tree graph http://jsfiddle.net/bGR8N/9/ that creates nodes at runtime (so its a bit different than the other examples). I have text that displays on a node.on("mouseover..."). The problem is that the nodes are sometimes overlapped by the links. Now, I know that I should be able to fix this by creating the links first and the nodes afterwards but then I get: Error: Invalid value for <path> attribute d="M,C,NaN ,NaN ," Javascript code: var width = 960, height = 500; var tree = d3

问题 I'm pretty new to D3.js (I'm a R programmer). I'm trying to create a scatter and put a legend in the right bottom. However, it's overlapping with chart area. I've been trying to take some examples in internet with no lucky. When I try to move it to the right, the names and/or symbols are not visible. I want to place the legend outside the chart frame, so it won't overlap. Any help is appreciated. Here's what I tried so far: d3.csv('https://gist.githubusercontent.com/netj/8836201/raw

问题 we are trying to create a visualisation with D3 which represents a stock portfolios assets with relative sized weightings with 3 levels deep nested data. We have used D3 Pack and a zoom function such as this as a template https://bl.ocks.org/mbostock/7607535 The issue we are facing is D3 pack works from the children up the parent chain, and the parents sizes are not relative to each other due to the fact D3 pack tries to pack the children most efficiently as possible and depending on the

问题 When I compute the text length of a textpath element the value doesn't change when I style the 'letter-spacing' differently. Is there a way to deal with the extra length due the extra spacing ? Currently I compute the textlength to hide some labels on a bilevel-partion graph: textsElements .attr("dy", function(d) { var offset = (radius / strokeWidth)/2; var rotation = getRotationDeg(d) return rotation > 0 && rotation < 180 ? -offset : offset; }) .append("textPath") .attr("startOffset", "50%")

问题 Using bar chart: actionsChart /* dc.barChart('#volume-month-chart', 'chartGroup') */ .width(actionsWidth) .height(240) .margins({top: 10, right: 50, bottom: 30, left: 40}) .dimension(dateDimension) //... .elasticX(true) .elasticY(true) .gap(1) .alwaysUseRounding(true) .x(d3.time.scale().domain( [ minDate, maxDate ] ) ) .round(d3.time.day.round) .xUnits(d3.time.days) .renderHorizontalGridLines(true) //.xAxisLabel( 'Dan') //.xAxisPadding(2) .xAxisLabel( "Datum") //.yAxisLabel( "Akcije" ) // OK,

问题 Using bar chart: actionsChart /* dc.barChart('#volume-month-chart', 'chartGroup') */ .width(actionsWidth) .height(240) .margins({top: 10, right: 50, bottom: 30, left: 40}) .dimension(dateDimension) //... .elasticX(true) .elasticY(true) .gap(1) .alwaysUseRounding(true) .x(d3.time.scale().domain( [ minDate, maxDate ] ) ) .round(d3.time.day.round) .xUnits(d3.time.days) .renderHorizontalGridLines(true) //.xAxisLabel( 'Dan') //.xAxisPadding(2) .xAxisLabel( "Datum") //.yAxisLabel( "Akcije" ) // OK,

问题 I'm attempting to use the script in Convert data to OHLC (Open, High, Low, Close) in JavaScript? to convert some chart data to OHLC. The only thing is that my data differs a bit from the original (http://api.bitcoincharts.com/v1/csv/localbtcDKK.csv.gz - showing all bitcoin trades ever done in Denmark), so how would I have to go about modifying the code? Original data var data = [{"tid": 283945, "date": 1384934366, "amount": "0.08180000", "price": "501.30"}, {"tid": 283947, "date": 1384934066,

问题 QUESTION: Why is the color distribution on my D3 Heatmap different from the Reference one ? The data is the same, I don't know where I made a mistake. I must have specified the data range incorrectly ? CODE: <script type="text/javascript"> d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", function(error, json) { if (error) { return console.warn(error); } visualizeThe(json); }); function visualizeThe(data) { const baseTemperature =