dc.js

Crossfilter.js and Dc.js data structure to reduce duplicate values

由 天涯浪子 提交于 2019-12-08 00:08:48
问题 I have currently the following data structure to draw graphs: [ {"tickID":0,"AgentID":"0","geometryTableName":"geometryTableName_tick0","classID":8,"name":"flat roof","memDegree":0.2,"ellipticfit":6.21025,"mainDirection",.........}, {"tickID":0,"AgentID":"0","geometryTableName":"geometryTableName_tick0","classID":1,"name":"roof","memDegree":0.4,"ellipticfit":6.21025,"mainDirection",.........}, {"tickID":0,"AgentID":"0","geometryTableName":"geometryTableName_tick0","classID":7,"name":"saddled

dc.js / crossfilter performance issue 12,000+ rows of CSV data

由 倖福魔咒の 提交于 2019-12-07 22:56:55
问题 I'm having some performance issues with using dc.js and crossfilter. I'm creating a set of graphs displaying different dimensions of some cycling data (code here, data here, viewable here). The charts render after a few second or two, but the main performance issues occur when clicking any of the graphs - the transition animations kind of "snap" after a delay, and it's a bit jarring. I've also noticed that just removing the empty line chart at the top of the page causes the three remaining

Exporting dc.js chart from SVG to PNG

由 不问归期 提交于 2019-12-07 16:28:29
I have a dc.js chart and I want to export it as a PNG image, using exupero's saveSvgAsPng : function save() { var options = {}; options.backgroundColor = '#ffffff'; options.selectorRemap = function(s) { return s.replace(/\.dc-chart/g, ''); }; var chart = document.getElementById('chart').getElementsByTagName('svg')[0]; saveSvgAsPng(chart, 'chart.png', options) } var data = [ {day: 1, service: 'ABC', count: 100}, {day: 2, service: 'ABC', count: 80}, {day: 4, service: 'ABC', count: 10}, {day: 7, service: 'XYZ', count: 380}, {day: 8, service: 'XYZ', count: 400} ]; var ndx = crossfilter(data); var

dc.js: Adding a Legend to Pie Chart

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-07 15:53:26
I'm trying to add a legend to my pie chart but I keep getting the error TypeError: dc.legend is not a function . I'm not sure where to begin on fixing this. I've tried the solution here and here , but no luck. Any help would be greatly appreciated! var geoValue = facts.dimension(function (d) { return d.geo; }); var geoGroup = geoValue.group(); geoChart .width(480) .radius(100) .innerRadius(90) .dimension(geoValue) .group(geoGroup) .transitionDuration(500) .legend(dc.legend().x(250).y(100)) //LEGEND CODE .title(function(d){return d.geo;}); The syntax looks correct. I have had several cases

How to create interaction with selectMenu in dc.js

由 只谈情不闲聊 提交于 2019-12-07 12:02:31
I'm trying to create a dashboard with a date chooser. I did it for other figures, but it doesn't work here. I'm quite new with dc and I can't figure out if it's a problem of the group or a problem of the date format (or something else). Here is my code : d3.csv("data/saccr_realloc_test.csv", function (error, saccr) { var parser = d3.time.format("%d.%m.%Y"); //var formatter=d3.time.format("%d.%m.%Y"); saccr.forEach(function(d) { d.date = parser.parse(d.date); d.ead = +d.ead; }); var cptyChart = dc.barChart("#dc-cpty-chart"); var lineChart = dc.lineChart("#volume-chart"); var ndx = crossfilter

Add percentages to the pie chart label in dc.js

由 孤街醉人 提交于 2019-12-07 07:33:47
问题 I have a pie chart for which I want to add percentages to the label. Here is a jsfiddle of the pie chart and the code is below. Right now the chart shows the actual values. I looked at the dc.js Getting Started and How-To Guide which is an example of a dashboard. It has the chart with percentages in the label. However, when I try to replicate the structure I get an error. For example, when I use the label function like so .label(function(d) {if(all.value){return d.key + " " + d.value / all

How to position labels on dc.js pie chart?

由 删除回忆录丶 提交于 2019-12-07 07:30:43
问题 I'd like to show labels for tiny slices ( chart.minAngleForLabel(0.05) ) avoiding text overlap. I added a renderlet that shifts labels toward outer edge: .on('renderlet', function(chart) { chart.selectAll('text').attr('transform', function(d, i) { var old = this.getAttribute('transform'); if (d.endAngle-d.startAngle > 0.3) { return old; } var xy = old.slice(10,-1).split(','); var m = 1.25 + (i%3) * 0.25; return 'translate(' + (+xy[0]*m) + ',' + (+xy[1]*m) + ')'; }) }) and i'm rather happy

Why is the brush preventing dc.js barChart toolTips to appear?

由 风格不统一 提交于 2019-12-07 06:11:25
问题 I don't see why that behaviour was implemented. Any good reason ? 回答1: In order to have a brushing function, a transparent rectangle that captures all mouse events has to be drawn over top of the graph. That prevents any mouse events from triggering the tooltip event handler on the main graph elements, and is the reason the dc.js API warns that leaving brushing behaviour "on" will disable all other interactive behaviour. If you want both behaviours, consider using a focus + context layout.

.elasticX(true) doesn't work dc.js

由 旧城冷巷雨未停 提交于 2019-12-06 15:10:10
I have a Composite Linechart The .elasticX(true) does not work :/ Could Someone help me var composite = dc.compositeChart("#durationline-chart"); composite.width(1500).height(350) .group(Durations) .brushOn(true) .yAxisLabel("Duration") .x(d3.scale.ordinal()) .xUnits(dc.units.ordinal) .margins({ top: 10, left: 50, right: 10, bottom: 50 }) .elasticY(true) .elasticX(true) .renderlet(function(chart) { chart.selectAll("g.x text") .attr('transform', "rotate(+20)"); }) .compose([ dc.lineChart(composite) .group(Testcase_Time, "Time") .colors('#1E90FF'), dc.lineChart(composite) .group(Testcase

Add “Zoomability” function to a d3.js map processing data from dc.js/crossfilter

由 梦想的初衷 提交于 2019-12-06 12:34:05
I'm working with this map . Here is the file used to render it. I want add the click-to-zoom via transform functionality demonstrated in that mbostock example. In the map I'm using, this is the code that draws the map: //This is the data for the Map d3.json("data/europe5.json", function (error, eu) { console.log('map', eu) usChart.width(590) .height(500) .dimension(countries) .group(countriesJobsdSum) .projection(d3.geo.mercator() .scale((1200 + 1) / 2 ) .translate([660 / 4, 3360 / 4]) .precision(.1) ) .colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "
订阅 dc.js