d3.js

Tick text/variable labels not wrapping in d3 bar chart

由 房东的猫 提交于 2021-01-28 10:59:21
问题 I'm trying apply line wrapping to long variable labels along the x-axis in a d3 bar chart. Here's an my chart in an Observable notebook: https://observablehq.com/@unfpamaldives/figure4 I've attempted to apply a solution from this block, consisting essentially of the following: function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr("y"), dy = parseFloat

labels for circles not showing up in d3 data visualization

由 一曲冷凌霜 提交于 2021-01-28 10:51:48
问题 I am following this tutorial to create a node-like data visualization. <!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var color = d3.scaleOrdinal(d3.schemeCategory20); var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; })) .force("charge", d3.forceManyBody()) .force(

Crossfilter - Loading a JSON file from localStorage

由 旧时模样 提交于 2021-01-28 10:40:23
问题 I'm fairly new to Javascript and I'm trying to create a simple bar chart with d3.js using some data saved in the localStorage. The data in the localStorage is acquired by the following function: function logScore() { var name = prompt("Please enter your name to add to the high scores list:"); var score = game.count; var gameDate = today; var scoreObj = { name: name, score: score, date: gameDate }; scoresArray.push(scoreObj); window.localStorage.setItem('scoresRecord', JSON.stringify

Annotation connectors blocking tooltips

由 孤者浪人 提交于 2021-01-28 10:40:23
问题 I am creating a line plot with tooltips appearing on hovering over the data points using d3. However, I added a few annotations to the plot and the callout circles now block the tooltips from appearing on the points overlapped by the annotations. The following is a screenshot of the tooltip appearing on the points, but it doesn't appear on the point overlayed by the annotation circle (grey circle on the image). The code used to generate the line plot, the points, tooltip and annotations are

Annotation connectors blocking tooltips

由 三世轮回 提交于 2021-01-28 10:39:42
问题 I am creating a line plot with tooltips appearing on hovering over the data points using d3. However, I added a few annotations to the plot and the callout circles now block the tooltips from appearing on the points overlapped by the annotations. The following is a screenshot of the tooltip appearing on the points, but it doesn't appear on the point overlayed by the annotation circle (grey circle on the image). The code used to generate the line plot, the points, tooltip and annotations are

Annotation connectors blocking tooltips

由 岁酱吖の 提交于 2021-01-28 10:34:33
问题 I am creating a line plot with tooltips appearing on hovering over the data points using d3. However, I added a few annotations to the plot and the callout circles now block the tooltips from appearing on the points overlapped by the annotations. The following is a screenshot of the tooltip appearing on the points, but it doesn't appear on the point overlayed by the annotation circle (grey circle on the image). The code used to generate the line plot, the points, tooltip and annotations are

Using ternary in D3

由 坚强是说给别人听的谎言 提交于 2021-01-28 09:52:45
问题 I'm trying to work out how I can use multiple conditions with ternary operator in D3 (still finding my way with D3). I have a spreadsheet with a column legislative and the values included are Yes1, Yes2, Yes3 and No. For Yes1 I want to color my circles red, Yes2 are pink, Yes3 are orange and No are grey. The code below colors all circles either red or pink only. .style("fill", function(d) { return (d.data.legislative == "Yes1" ? "red" : "grey" || "Yes2" ? "pink" : "grey" || "Yes3" ? "orange"

D3 text wrap with text-anchor: middle

由 放肆的年华 提交于 2021-01-28 09:17:38
问题 In D3 I would like to wrap texts which have a middle text anchor. I looked at this example from Mike Bostok but I cannot wrap my head around the settings. I would like to see the text to be in the center (horizontal and vertical) of the red box. var plot = d3.select(container) .insert("svg") .attr('width', 100) .attr('height', 200); plot.append("text") .attr("x", 50) .attr("y", 100) .attr("text-anchor", "middle") .attr("alignment-baseline", "alphabetic") .text("The brown fox jumps!") .call

Unable to reset the focus ordinal bar chart

由 送分小仙女□ 提交于 2021-01-28 08:32:12
问题 I am trying to reset after choosing some of the individual's bar. index.html: (line no. 62) <span> <a href="javascript:focus.filterAll(); dc.redrawAll();" class="reset">reset</a> </span> This seems not to work. I was able to reset all the graphs pie chart, line chart, etc but not this one. Those two ordinal graphs are created in index.js like this: var focus = new dc.barChart('#focus'); var range = new dc.barChart('#range'); https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7

d3.quantile seems to be calculating Q1 incorrectly

由 左心房为你撑大大i 提交于 2021-01-28 08:06:40
问题 I'm giving a sorted array of 24 numbers to d3.quantile and asking it to calculate the first quartile value. Since the array can be split evenly into four groups of 6 values, my assumption was that the result would be the mean of arr[5] and arr[6], but that's not what I got. var arr = [89.7, 93.2, 94, 94.3, 94.5, 95.4, 95.9, 96.1, 96.4, 96.5, 96.9, 96.9, 97.3, 97.6, 97.6, 97.6, 97.8, 98.3, 98.3, 98.4, 98.5, 98.5, 98.6, 98.6]; var myAssumption = (arr[5] + arr[6]) / 2; // 95.65 var d3Result = d3
订阅 d3.js