playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix z-index for bars and lines

pull/1/head
Masayuki Tanaka 12 years ago committed by masayuki
parent
0d2f45a16d
commit
57a5b240cf
1 changed files with 80 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 123
      c3.js

123
c3.js
Unescape View File

@ -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()
// subchart
if (withSubchart && __subchart_show) {
context.selectAll('.__line')
// lines and cricles
main.selectAll('.__line')
.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
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) })
// 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 --*/

Write Preview
Loading…
Cancel
Save