堆栈图中选择性条形图的坐标
我有一个堆积的条形图。 我想画一条线,像堆积条形图中的几条。
像这样的东西。
所以要做到这一点,我需要找到第二个和最后一个酒吧的y
坐标。
有人请帮助使用d3绘制这些线。
JS:
var width = 750, height = 500; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .rangeRound([height, 0]); var color = d3.scale.ordinal() .range(["#D70B16", "#154CEF", "#1A8A55"]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "Value: " + (d.y1 - d.y0) + ""; }) var svgContainer = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + 30 + "," + 30 + ")"); d3.csv("data.csv", function(error, data) { color.domain(d3.keys(data[0]).filter(function(key) { return key !== "circle"; })); data.forEach(function(d) { var y0 = 0; d.hours = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); d3.select('body').append('pre') .text(JSON.stringify(d.hours, null, ' ')); d.total = d.hours[d.hours.length - 1].y1; }); x.domain(data.map(function(d) {return d.circle;})); y.domain([0, d3.max(data, function(d) {return d.total;})]) svgContainer.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svgContainer.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Login Hours"); var circle = svgContainer.selectAll(".circle") .data(data) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x(d.circle) + ",0)"; }); circle.selectAll("rect") .data(function(d) { return d.hours; }) .enter() .append("rect") .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.y1); }) .attr("height", function(d) { return y(d.y0) - y(d.y1); }) .on("mouseover", tip.show) .on("mouseout", tip.hide) .style("fill", function(d) { return color(d.name); }); circle.selectAll("text") .data(function(d) { return d.hours; }) .enter() .append("text") .attr("x", 75) .attr("y", function(d, i) { return y(d.y1) ; }) .style("text-anchor", "middle") .text("test") })
你如何确定这些值(和条)取决于你如何识别它们。 在这种特殊情况下,您实际上不需要获取rect
项目,因为基础数据可让您访问所需的所有内容。
例如,要获得第一列中第二个条的y
坐标,可以使用以下代码:
var yCoord = y(data[0].hours[1].y1);
链接地址: http://www.djcxy.com/p/90971.html