Hi i am trying to customize this example
http://bl.ocks.org/tjdecke/raw/5558084/
I am trying to have 3 rect under a 1 hour (hour label).
function (error, data) {
console.log(data);
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1, d3.max(data, function (d) {
return d.value;
})])
.range(colors);
var cards = svg.selectAll(".hour")
.data(data, function (d) {
return d.day + ':' + d.hour;
});
cards.append("title");
cards.enter().append("rect")
.attr("x", function (d) {
return (d.hour - 1) * gridSize;
})
.attr("y", function (d) {
return (d.day - 1) * gridSize;
})
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0]).append('rect');
cards.transition().duration(1000)
.style("fill", function (d) {
return colorScale(d.value);
});
cards.select("title").text(function (d) {
return d.value;
});
cards.exit().remove();
here is code that I tried to customize.
Related
I have taken the heatmap chart from http://bl.ocks.org/tjdecke/5558084 and modified it. I was excpecting to get tooltips using
cards.select("svg:title").text(function(d) {
return "Tariff " + d.value;
});
The complete project is here: https://jsfiddle.net/8wtoqg6r/1/.
How can I get a hover event to show the tariff number (which is d.value) in a tooltip?
I'm now using https://github.com/Caged/d3-tip according to the example http://bl.ocks.org/Caged/6476579. The relevant code looks like that
let tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.html(function(d) {
return "Tarif " + d.value;
});
svg.call(tip);
let heatmapChart = function(data) {
let cards = svg.selectAll(".hour")
.data(data, function(d) {
return d.day + ':' + d.hour;
});
cards.append("title");
cards.enter().append("rect")
.attr("x", function(d) {
return (d.hour - 1) * gridSize;
})
.attr("y", function(d) {
return (d.day - 1) * gridSize;
})
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) {
return colors[d.value - 1];
});
cards.exit().remove();
};
heatmapChart(data);
A complete solution can be found in the fiddle: https://jsfiddle.net/8wtoqg6r/3/
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, labels,
minExtent = brush.extent()[0],
maxExtent = brush.extent()[1],
visItems = items.filter(function(d) {return d.starting_time < maxExtent && d.ending_time > minExtent;});
mini.select(".brush")
.call(brush.extent([minExtent, maxExtent]));
x1.domain([minExtent, maxExtent]);
//update main item rects
rects = itemRects.selectAll("rect")
.data(visItems, function(d) { return d.id; })
.attr("x", function(d) {return x1(d.starting_time);})
.attr("width", function(d) {return x1(d.ending_time) - x1(d.starting_time);});
rects.enter().append("rect")
.attr("class", function(d) {return "miniItem";})
.attr("x", function(d) {return x1(d.starting_time);})
.attr("y", function(d) {return y1(d.lane) + 10;})
.attr("fill", function(d, i) {
return colores_background(d.lane);
})
.attr("width", function(d) {return x1(d.ending_time) - x1(d.starting_time);})
.attr("height", function(d) {return .8 * y1(1);});
rects.exit().remove();
//update the item labels
labels = itemRects.selectAll("text")
.data(visItems, function (d) { return d.id; })
.attr("x", function(d) {return x1(Math.max(d.starting_time, minExtent) + 2);});
labels.enter().append("text")
.text(function(d) {return d.text;})
.attr("x", function(d) {return x1(Math.max(d.starting_time, minExtent));})
.attr("y", function(d) {return y1(d.lane + .5);})
.attr("fill", function(d, i) {
return colores_foreground(d.lane);
})
.attr("text-anchor", "start");
labels.exit().remove();
}
I am trying to make this swimlane chart work with latest d3.js version.
So far I have managed to migrate some of the d3.js v2 API's to d3.js V4.5 API but there are some issues that I am not able to figure out.
I am getting "Expected length, "NaN" error which seems to be coming from .call(brush)
plunker with changes I made
function display () {
var rects, labels
, minExtent = d3.timeDay(brush.extent()[0])
, maxExtent = d3.timeDay(brush.extent()[1])
, visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent});
mini.select('.brush').call(brush.extent([minExtent, maxExtent]));
x1.domain([minExtent, maxExtent]);
//x1Offset.range([0, x1(d3.time.day.ceil(now) - x1(d3.time.day.floor(now)))]);
// shift the today line
main.select('.main.todayLine')
.attr('x1', x1(now) + 0.5)
.attr('x2', x1(now) + 0.5);
// update the axis
main.select('.main.axis.date').call(x1DateAxis);
main.select('.main.axis.month').call(x1MonthAxis)
.selectAll('text')
.attr('dx', 5)
.attr('dy', 12);
// upate the item rects
rects = itemRects.selectAll('rect')
.data(visItems, function (d) { return d.id; })
.attr('x', function(d) { return x1(d.start); })
.attr('width', function(d) { return x1(d.end) - x1(d.start); });
rects.enter().append('rect')
.attr('x', function(d) { return x1(d.start); })
.attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; })
.attr('width', function(d) { return x1(d.end) - x1(d.start); })
.attr('height', function(d) { return .8 * y1(1); })
.attr('class', function(d) { return 'mainItem ' + d.class; });
rects.exit().remove();
// update the item labels
labels = itemRects.selectAll('text')
.data(visItems, function (d) { return d.id; })
.attr('x', function(d) { return x1(Math.max(d.start, minExtent)) + 2; });
labels.enter().append('text')
.text(function (d) { return 'Item\n\n\n\n Id: ' + d.id; })
.attr('x', function(d) { return x1(Math.max(d.start, minExtent)) + 2; })
.attr('y', function(d) { return y1(d.lane) + .4 * y1(1) + 0.5; })
.attr('text-anchor', 'start')
.attr('class', 'itemLabel');
labels.exit().remove();
}
I am pretty sure that this used to work. I wanted to be able to sort by values when bar was clicked and then by name if bar was clicked again.
http://jsbin.com/qimitedohe/edit?js,output
Right now I am getting only names sorting at the bottom but bars are not being selected. What did I screw up?
Thanks!
Ah my css was missing a class name that I used to identify individual bars. I just added an "id" property to all bars and then collected them by that.
barChart.selectAll("#bar")
.data(data)
.enter().append("rect")
.attr("id", "bar")
.attr("fill", "grey")
.attr("x", function (d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.value); })
.attr("height", function (d) { return height - y(d.value); })
.on("click", function() {sortBars();})
.on("mouseover", function(d){
var delta = d.value;
var xPos = parseFloat(d3.select(this).attr("x"));
var yPos = parseFloat(d3.select(this).attr("y"));
var height = parseFloat(d3.select(this).attr("height"));
var width = parseFloat(d3.select(this).attr("width"));
d3.select(this).attr("fill", "orange");
barChart.append("text")
.attr("x", xPos)
.attr("y", yPos - 3)
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("font-weight", "bold")
.attr("fill", "black")
.attr("text-anchor", "middle")
.attr("id", "tooltip")
.attr("transform", "translate(" + width/2 + ")")
.text(d.name +": "+ d.value);
})
.on("mouseout", function(){
barChart.select("#tooltip").remove();
d3.select(this).attr("fill", "grey");
});
var sortOrder = true;
var sortBars = function() {
//Flip value of sortOrder
sortOrder = !sortOrder;
var x0 = x.domain(data.sort(sortOrder ? function(a, b) { return b.value - a.value; }
: function(a, b) { return d3.ascending(a.name, b.name); })
.map(function(d) { return d.name; }))
.copy();
barChart.selectAll("#bar")
.sort(function(a, b) { return x0(a.name) - x0(b.name); });
var transition = barChart.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition.selectAll("#bar")
.delay(delay)
.attr("x", function(d) { return x0(d.name); });
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
};
function type(d) {
d.value = +d.value;
return d;
}
I'm trying to combine a D3 Pack Layout with links. It works in the initial state but when I try to zoom the positions of the svg path elements are not updated. How can I translate paths such that they are aligned to the nodes when the user performs zooming? Below is my zoom function.
To check the whole code, see js fiddle. I hope somebody can help me!
function zoom(d, i) {
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = vis.transition()
.duration(d3.event.altKey ? 7500 : 750);
t.selectAll("circle")
.attr("cx", function(d) {
return x(d.x);
})
.attr("cy", function(d) {
return y(d.y);
})
.attr("r", function(d) {
return k * d.r;
});
t.selectAll("text")
.attr("x", function(d) {
return x(d.x);
})
.attr("y", function(d) {
return y(d.y);
})
.style("opacity", function(d) {
return k * d.r > 20 ? 1 : 0;
});
console.log(t.selectAll('path'));
d3.selectAll('path')
.attr('class', function() {
// TODO: diversify
return 'child-branch';
})
.style('stroke', function(d) {
return d3.rgb(d3.scale.category20(d.target.by_alliance_with + 1)).darker();
})
.attr('d', function(d) {
console.log("d", d);
return linkArc(d);
});