function addColumn() { function clumnMouseover(d) { d3.select(this).selectAll(".transparentPath").attr("opacity", 0.8); // 添加 div tipTimerConfig.target = this; tipTimerConfig.longer = new Date().getTime(); tipTimerConfig.exist = false; //获取坐标 tipTimerConfig.winEvent = { x: event.clientX - 100, y: event.clientY }; tipTimerConfig.boxHeight = 50; tipTimerConfig.boxWidth = 140; //hide tipTimerConfig.ClearDiv(); //show tipTimerConfig.hoverTimerFn(createTooltipTableData(d)); } function clumnMouseout(d) { d3.select(this).selectAll(".transparentPath").attr("opacity", 1); tipTimerConfig.target = null; tipTimerConfig.ClearDiv(); } var g = svg.selectAll('.g') .data(data) .enter() .append('g') .on("mouseover", clumnMouseover) .on("mouseout", clumnMouseout) .attr('transform', function (d) { return "translate(" + (d.ox + margin.left + 20) + "," + (svgHeight - margin.bottom + 15) + ")" }); g.transition() .duration(2500) .attr("transform", function (d) { return "translate(" + (d.ox + margin.left + 20) + ", " + (yLinearScale(d.child.value) + margin.bottom - 15) + ")" }); g.append('rect') .attr('x', 0) .attr('y', 0) .attr("class", "transparentPath") .attr('width', function (d, i) { return d.ow; }) .attr('height', function (d) { return d.oh; }) .style('fill', function (d, i) { return mainColorList[i] }) .transition() .duration(2500) .attr("height", function (d, i) { return svgHeight - margin.bottom - margin.top - yLinearScale(d.child.value); }); g.append('path') .attr("class", "transparentPath") .attr('d', function (d) { return "M0,0 L" + d.p1.x + "," + d.p1.y + " L" + d.p2.x + "," + d.p2.y + " L" + d.ow + ",0 L0,0"; }) .style('fill', function (d, i) { return topColorList[i] }); g.append('path') .attr("class", "transparentPath") .attr('d', function (d) { return "M" + d.ow + ",0 L" + d.p2.x + "," + d.p2.y + " L" + d.p3.x + "," + d.p3.y + " L" + d.ow + "," + d.oh + " L" + d.ow + ",0" }) .style('fill', function (d, i) { return rightColorList[i] }) .transition() .duration(2500) .attr("d", function (d, i) { return "M" + d.ow + ",0 L" + d.p2.x + "," + d.p2.y + " L" + d.p3.x + "," + (d.p3.y + svgHeight - margin.top - margin.bottom - yLinearScale(d.child.value)) + " L" + d.ow + "," + (svgHeight - margin.top - margin.bottom - yLinearScale(d.child.value)) + " L" + d.ow + ",0" }); }
由于需要考虑动画,所以对渲染时的柱子位置进行了处理.对这方面不理解的话可以留言讨论.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: