Skip to content

C
c3-closed
Commit 57a5b240 authored by Masayuki Tanaka's avatar Masayuki Tanaka Committed by masayuki
Browse files
Options

Fix z-index for bars and lines

parent 0d2f45a1
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 45 deletions
c3.js
View file @ 57a5b240
...@@ -933,6 +933,14 @@ ...@@ -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 // ATTENTION: This must be called AFTER chart added
// Add Axis // Add Axis
main.append("g") main.append("g")
...@@ -958,6 +966,14 @@ ...@@ -958,6 +966,14 @@
.attr("clip-path", clipPath) .attr("clip-path", clipPath)
.attr('class', 'chart') .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. // ATTENTION: This must be called AFTER chart rendered and BEFORE brush called.
// Update extetn for Brush // Update extetn for Brush
if (__subchart_default !== null) { if (__subchart_default !== null) {
...@@ -1063,22 +1079,6 @@ ...@@ -1063,22 +1079,6 @@
.attr("y2", function(d){ return y(d.value) }) .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 // bars
barW = getBarW(xAxis, barTargetsNum) barW = getBarW(xAxis, barTargetsNum)
barH = getBarH(y, height) barH = getBarH(y, height)
...@@ -1098,12 +1098,24 @@ ...@@ -1098,12 +1098,24 @@
.style('opacity', 0) .style('opacity', 0)
.remove() .remove()
// subchart // lines and cricles
if (withSubchart && __subchart_show) { main.selectAll('.__line')
context.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0) .transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnSub) .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) {
// bars // bars
barW = getBarW(xAxis2, barTargetsNum) barW = getBarW(xAxis2, barTargetsNum)
barH = getBarH(y2, height2) barH = getBarH(y2, height2)
...@@ -1122,6 +1134,11 @@ ...@@ -1122,6 +1134,11 @@
contextBar.exit().transition() contextBar.exit().transition()
.style('opacity', 0) .style('opacity', 0)
.remove() .remove()
// lines
context.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnSub)
} }
// circles for select // circles for select
...@@ -1145,55 +1162,73 @@ ...@@ -1145,55 +1162,73 @@
} }
function updateTargets (targets) { function updateTargets (targets) {
var f, c var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate
var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate
/*-- Main --*/ /*-- Main --*/
f = main.select('.chart') //-- Bar --//
.selectAll('.target') mainBarUpdate = main.select('.chart-bars')
.selectAll('.chart-bar')
.data(targets) .data(targets)
.enter().append('g') mainBarEnter = mainBarUpdate.enter().append('g')
.attr('class', function(d){ return 'target target-' + d.id }) .attr('class', function(d){ return 'chart-bar target target-' + d.id })
.style("pointer-events", "none") .style("pointer-events", "none")
.style('opacity', 0) .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 // Lines for each data
f.append("path") mainLineEnter.append("path")
.attr("class", classLine) .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 // Circles for each data point on lines
f.append('g') mainLineEnter.append('g')
.attr("class", function(d){ return "selected-circles selected-circles-" + d.id }) .attr("class", function(d){ return "selected-circles selected-circles-" + d.id })
f.append('g') mainLineEnter.append('g')
.attr("class", classCircles) .attr("class", classCircles)
.style("fill", function(d){ return color(d.id) }) .style("fill", function(d){ return color(d.id) })
.style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null }) .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 --*/ /*-- Context --*/
if (__subchart_show) { if (__subchart_show) {
c = context.select('.chart')
.selectAll('.target') contextBarUpdate = context.select('.chart-bars')
.selectAll('.chart-bar')
.data(targets) .data(targets)
.enter().append('g') contextBarEnter = contextBarUpdate.enter().append('g')
.attr('class', function(d){ return 'target target-' + d.id }) .attr('class', function(d){ return 'chart-bar target target-' + d.id })
.style('opacity', 0) .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 // Lines for each data
c.append("path") contextLineEnter.append("path")
.attr("class", classLine) .attr("class", classLine)
.style("stroke", function(d) { return color(d.id) }) .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 --*/ /*-- Legend --*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment