Browse Source

Fix z-index for bars and lines

pull/1/head
Masayuki Tanaka 12 years ago committed by masayuki
parent
commit
57a5b240cf
  1. 125
      c3.js

125
c3.js

@ -933,6 +933,14 @@
})
)
// Define g for bar chart area
main.select(".chart").append("g")
.attr("class", "chart-bars")
// Define g for line chart area
main.select(".chart").append("g")
.attr("class", "chart-lines")
// ATTENTION: This must be called AFTER chart added
// Add Axis
main.append("g")
@ -958,6 +966,14 @@
.attr("clip-path", clipPath)
.attr('class', 'chart')
// Define g for bar chart area
context.select(".chart").append("g")
.attr("class", "chart-bars")
// Define g for line chart area
context.select(".chart").append("g")
.attr("class", "chart-lines")
// ATTENTION: This must be called AFTER chart rendered and BEFORE brush called.
// Update extetn for Brush
if (__subchart_default !== null) {
@ -1063,22 +1079,6 @@
.attr("y2", function(d){ return y(d.value) })
}
// lines and cricles
main.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnMain)
mainCircle = main.selectAll('.__circles').selectAll('.__circle')
.data(lineData)
mainCircle.transition().duration(withTransition ? 250 : 0)
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
mainCircle.enter().append("circle")
.attr("class", classCircle)
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
.attr("r", __point_r)
mainCircle.exit().remove()
// bars
barW = getBarW(xAxis, barTargetsNum)
barH = getBarH(y, height)
@ -1098,12 +1098,24 @@
.style('opacity', 0)
.remove()
// lines and cricles
main.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnMain)
mainCircle = main.selectAll('.__circles').selectAll('.__circle')
.data(lineData)
mainCircle.transition().duration(withTransition ? 250 : 0)
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
mainCircle.enter().append("circle")
.attr("class", classCircle)
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
.attr("r", __point_r)
mainCircle.exit().remove()
// subchart
if (withSubchart && __subchart_show) {
context.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnSub)
// bars
barW = getBarW(xAxis2, barTargetsNum)
barH = getBarH(y2, height2)
@ -1122,6 +1134,11 @@
contextBar.exit().transition()
.style('opacity', 0)
.remove()
// lines
context.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnSub)
}
// circles for select
@ -1145,55 +1162,73 @@
}
function updateTargets (targets) {
var f, c
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate
var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate
/*-- Main --*/
f = main.select('.chart')
.selectAll('.target')
//-- Bar --//
mainBarUpdate = main.select('.chart-bars')
.selectAll('.chart-bar')
.data(targets)
.enter().append('g')
.attr('class', function(d){ return 'target target-' + d.id })
mainBarEnter = mainBarUpdate.enter().append('g')
.attr('class', function(d){ return 'chart-bar target target-' + d.id })
.style("pointer-events", "none")
.style('opacity', 0)
// Bars for each data
mainBarEnter.append('g')
.attr("class", classBars)
.style("fill", function(d){ return color(d.id) })
.style("stroke", function(d){ return color(d.id) })
.style("stroke-width", 0)
.style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
//-- Line --//
mainLineUpdate = main.select('.chart-lines')
.selectAll('.chart-line')
.data(targets)
mainLineEnter = mainLineUpdate.enter().append('g')
.attr('class', function(d){ return 'chart-line target target-' + d.id })
.style("pointer-events", "none")
.style('opacity', 0)
// Lines for each data
f.append("path")
mainLineEnter.append("path")
.attr("class", classLine)
.style("stroke", function(d) { return color(d.id) })
.style("stroke", function(d){ return color(d.id) })
// Circles for each data point on lines
f.append('g')
mainLineEnter.append('g')
.attr("class", function(d){ return "selected-circles selected-circles-" + d.id })
f.append('g')
mainLineEnter.append('g')
.attr("class", classCircles)
.style("fill", function(d){ return color(d.id) })
.style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
// Bars for each data
f.append('g')
.attr("class", classBars)
.style("fill", function(d){ return color(d.id) })
.style("stroke", function(d){ return color(d.id) })
.style("stroke-width", 0)
.style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
/*-- Context --*/
if (__subchart_show) {
c = context.select('.chart')
.selectAll('.target')
contextBarUpdate = context.select('.chart-bars')
.selectAll('.chart-bar')
.data(targets)
.enter().append('g')
.attr('class', function(d){ return 'target target-' + d.id })
contextBarEnter = contextBarUpdate.enter().append('g')
.attr('class', function(d){ return 'chart-bar target target-' + d.id })
.style('opacity', 0)
// Bars for each data
contextBarEnter.append('g')
.attr("class", classBars)
.style("fill", function(d){ return color(d.id) })
//-- Line --//
contextLineUpdate = context.select('.chart-lines')
.selectAll('.chart-line')
.data(targets)
contextLineEnter = contextLineUpdate.enter().append('g')
.attr('class', function(d){ return 'chart-line target target-' + d.id })
.style('opacity', 0)
// Lines for each data
c.append("path")
contextLineEnter.append("path")
.attr("class", classLine)
.style("stroke", function(d) { return color(d.id) })
// Bars for each data
c.append('g')
.attr("class", classBars)
.style("fill", function(d){ return color(d.id) })
}
/*-- Legend --*/

Loading…
Cancel
Save