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

Fix class name and enable select/unselect interface for bars

pull/1/head
Masayuki Tanaka 12 years ago committed by masayuki
parent
b856be587b
commit
a640111d43
2 changed files with 40 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      c3.css
  2. 66
      c3.js

6
c3.css
Unescape View File

@ -23,7 +23,7 @@ path, line {
/*-- Line --*/ /*-- Line --*/
.target-line { .__line {
stroke-width: 1px; stroke-width: 1px;
} }
/*-- Point --*/ /*-- Point --*/
@ -35,11 +35,11 @@ path, line {
/*-- Bar --*/ /*-- Bar --*/
.target-bar._e_ { .__bar._e_ {
stroke-width: 6px; stroke-width: 6px;
} }
/* TODO: use this /* TODO: use this
.target-bar._s_ { .__bar._s_ {
stroke-width: 1px; stroke-width: 1px;
fill-opacity: 0.4; fill-opacity: 0.4;
} }

66
c3.js
Unescape View File

@ -406,6 +406,13 @@
function category (i) { function category (i) {
return i < __axis_x_categories.length ? __axis_x_categories[i] : i return i < __axis_x_categories.length ? __axis_x_categories[i] : i
} }
function classShapes (d) { return "__shapes __shapes-" + d.id }
function classLine (d) { return classShapes(d) + " __line __line-" + d.id }
function classCircles (d) { return classShapes(d) + " __circles __circles-" + d.id }
function classBars (d) { return classShapes(d) + " __bars __bars-" + d.id }
function classShape (d,i) { return "__shape __shape-" + i }
function classCircle (d,i) { return classShape(d,i) + " __circle __circle-" + i }
function classBar (d,i) { return classShape(d,i) + " __bar __bar-" + i }
//-- Bar --// //-- Bar --//
@ -726,13 +733,13 @@
// Expand circles if needed // Expand circles if needed
if (__point_focus_expand_enabled) { if (__point_focus_expand_enabled) {
main.selectAll('.target-circle-'+i) main.selectAll('.__circle-'+i)
.classed("_e_", true) .classed("_e_", true)
.attr('r', __point_focus_expand_r) .attr('r', __point_focus_expand_r)
} }
// Expand bars // Expand bars
main.selectAll(".target-bar-"+i) main.selectAll(".__bar-"+i)
.classed("_e_", true) .classed("_e_", true)
// Show xgrid focus line // Show xgrid focus line
@ -752,19 +759,19 @@
main.select('line.xgrid-focus').style("visibility", "hidden") main.select('line.xgrid-focus').style("visibility", "hidden")
tooltip.style("visibility", "hidden") tooltip.style("visibility", "hidden")
// Undo expanded circles // Undo expanded circles
main.selectAll('.target-circle-'+i) main.selectAll('.__circle-'+i)
.filter(function(){ return d3.select(this).classed('_e_') }) .filter(function(){ return d3.select(this).classed('_e_') })
.classed("_e_", false) .classed("_e_", false)
.attr('r', __point_r) .attr('r', __point_r)
// Undo expanded bar // Undo expanded bar
main.selectAll(".target-bar-"+i) main.selectAll(".__bar-"+i)
.classed("_e_", false) .classed("_e_", false)
}) })
.on('mousemove', function(d,i){ .on('mousemove', function(d,i){
if ( ! __data_selection_enabled || dragging) return if ( ! __data_selection_enabled || dragging) return
if ( __data_selection_grouped) return // nothing to do when grouped if ( __data_selection_grouped) return // nothing to do when grouped
main.selectAll('.target-circle-'+i+', .target-bar-'+i) main.selectAll('.__shape-'+i)
.filter(function(d){ return __data_selection_isselectable(d) }) .filter(function(d){ return __data_selection_isselectable(d) })
.each(function(d){ .each(function(d){
var _this = d3.select(this).classed('_e_', true) var _this = d3.select(this).classed('_e_', true)
@ -790,7 +797,7 @@
}) })
}) })
.on('click', function(d,i) { .on('click', function(d,i) {
main.selectAll('.target-circle-'+i+', .target-bar-'+i).each(function(d){ main.selectAll('.__shape-'+i).each(function(d){
var _this = d3.select(this), var _this = d3.select(this),
isSelected = _this.classed('_s_') isSelected = _this.classed('_s_')
var isWithin = false, toggle var isWithin = false, toggle
@ -828,8 +835,7 @@
.attr('y', minY) .attr('y', minY)
.attr('width', maxX-minX) .attr('width', maxX-minX)
.attr('height', maxY-minY) .attr('height', maxY-minY)
main.selectAll('.target-circles, .target-bars') main.selectAll('.__shapes').selectAll('.__shape')
.selectAll('.target-circle, .target-bar')
.filter(function(d){ return __data_selection_isselectable(d) }) .filter(function(d){ return __data_selection_isselectable(d) })
.each(function(d,i){ .each(function(d,i){
var _this = d3.select(this), var _this = d3.select(this),
@ -872,7 +878,7 @@
.transition().duration(100) .transition().duration(100)
.style('opacity', 0) .style('opacity', 0)
.remove() .remove()
main.selectAll('.target-circle, .target-bar') main.selectAll('.__shape')
.classed('_i_', false) .classed('_i_', false)
dragging = false dragging = false
// TODO: add callback here // TODO: add callback here
@ -1005,16 +1011,16 @@
} }
// lines and cricles // lines and cricles
main.selectAll('.target-line') main.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0) .transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnMain) .attr("d", lineOnMain)
mainCircle = main.selectAll('.target-circles').selectAll('.target-circle') mainCircle = main.selectAll('.__circles').selectAll('.__circle')
.data(lineData) .data(lineData)
mainCircle.transition().duration(withTransition ? 250 : 0) mainCircle.transition().duration(withTransition ? 250 : 0)
.attr("cx", function(d){ return x(d.x) }) .attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) }) .attr("cy", function(d){ return y(d.value) })
mainCircle.enter().append("circle") mainCircle.enter().append("circle")
.attr("class", function(d,i){ return "target-circle target-circle-" + i }) .attr("class", classCircle)
.attr("cx", function(d){ return x(d.x) }) .attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) }) .attr("cy", function(d){ return y(d.value) })
.attr("r", __point_r) .attr("r", __point_r)
@ -1025,12 +1031,12 @@
barH = getBarH(y, height) barH = getBarH(y, height)
barX = getBarX(x, barW, barTargetsNum, barIndices) barX = getBarX(x, barW, barTargetsNum, barIndices)
barY = getBarY(y) barY = getBarY(y)
mainBar = main.selectAll('.target-bars').selectAll('.target-bar') mainBar = main.selectAll('.__bars').selectAll('.__bar')
.data(barData) .data(barData)
mainBar.transition().duration(withTransition ? 250 : 0) mainBar.transition().duration(withTransition ? 250 : 0)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH) .attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
mainBar.enter().append('rect') mainBar.enter().append('rect')
.attr("class", function(d,i){ return "target-bar target-bar-" + i }) .attr("class", classBar)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH) .attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
.style("opacity", 0) .style("opacity", 0)
.transition().duration(withTransition ? 250 : 0) .transition().duration(withTransition ? 250 : 0)
@ -1041,7 +1047,7 @@
// subchart // subchart
if (withSubchart && __subchart_show) { if (withSubchart && __subchart_show) {
context.selectAll('.target-line') context.selectAll('.__line')
.transition().duration(withTransition ? 250 : 0) .transition().duration(withTransition ? 250 : 0)
.attr("d", lineOnSub) .attr("d", lineOnSub)
@ -1050,12 +1056,12 @@
barH = getBarH(y2, height2) barH = getBarH(y2, height2)
barX = getBarX(x2, barW, barTargetsNum, barIndices) barX = getBarX(x2, barW, barTargetsNum, barIndices)
barY = getBarY(y2) barY = getBarY(y2)
contextBar = context.selectAll('.target-bars').selectAll('.target-bar') contextBar = context.selectAll('.__bars').selectAll('.__bar')
.data(barData) .data(barData)
contextBar.transition().duration(withTransition ? 250 : 0) contextBar.transition().duration(withTransition ? 250 : 0)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH) .attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
contextBar.enter().append('rect') contextBar.enter().append('rect')
.attr("class", function(d,i){ return "target-bar target-bar-" + i }) .attr("class", classBar)
.attr("x", barX).attr("y", height2).attr("width", barW).attr("height", 0) .attr("x", barX).attr("y", height2).attr("width", barW).attr("height", 0)
.style("opacity", 0) .style("opacity", 0)
.transition() .transition()
@ -1101,18 +1107,18 @@
// Lines for each data // Lines for each data
f.append("path") f.append("path")
.attr("class", function(d){ return "target-line target-line-" + d.id }) .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') f.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') f.append('g')
.attr("class", function(d){ return "target-circles target-circles-" + d.id }) .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 // Bars for each data
f.append('g') f.append('g')
.attr("class", function(d){ return "target-bars target-bars-" + d.id }) .attr("class", classBars)
.style("fill", function(d){ return color(d.id) }) .style("fill", function(d){ return color(d.id) })
.style("stroke", function(d){ return color(d.id) }) .style("stroke", function(d){ return color(d.id) })
.style("stroke-width", 0) .style("stroke-width", 0)
@ -1130,11 +1136,11 @@
// Lines for each data // Lines for each data
c.append("path") c.append("path")
.attr("class", function(d){ return "target-line target-line-" + d.id }) .attr("class", classLine)
.style("stroke", function(d) { return color(d.id) }) .style("stroke", function(d) { return color(d.id) })
// Bars for each data // Bars for each data
c.append('g') c.append('g')
.attr("class", function(d){ return "target-bars target-bars-" + d.id }) .attr("class", classBars)
.style("fill", function(d){ return color(d.id) }) .style("fill", function(d){ return color(d.id) })
} }
@ -1341,8 +1347,7 @@
c3.selected = function (target) { c3.selected = function (target) {
var suffix = (typeof target !== 'undefined') ? '-' + target : '' var suffix = (typeof target !== 'undefined') ? '-' + target : ''
return d3.merge( return d3.merge(
main.selectAll('.target-circles' + suffix) main.selectAll('.__shapes' + suffix).selectAll('.__shape')
.selectAll('circle')
.filter(function(){ return d3.select(this).classed('_s_') }) .filter(function(){ return d3.select(this).classed('_s_') })
.map(function(d){ return d.map(function(_d){ return _d.__data__ }) }) .map(function(d){ return d.map(function(_d){ return _d.__data__ }) })
) )
@ -1350,23 +1355,26 @@
c3.select = function (indices, resetOther) { c3.select = function (indices, resetOther) {
if ( ! __data_selection_enabled) return if ( ! __data_selection_enabled) return
main.selectAll('.target-circles').selectAll('.target-circle').each(function(d,i){ main.selectAll('.__shapes').selectAll('.__shape').each(function(d,i){
var selectShape = (this.nodeName === 'circle') ? selectPoint : selectBar,
unselectShape = (this.nodeName === 'circle') ? unselectPoint : unselectBar
if (indices.indexOf(i) >= 0) { if (indices.indexOf(i) >= 0) {
if (__data_selection_grouped || __data_selection_isselectable(d)) { if (__data_selection_grouped || __data_selection_isselectable(d)) {
selectPoint(d3.select(this).classed('_s_',true), d, i) selectShape(d3.select(this).classed('_s_',true), d, i)
} }
} else if (typeof resetOther !== 'undefined' && resetOther) { } else if (typeof resetOther !== 'undefined' && resetOther) {
unselectPoint(d3.select(this).classed('_s_',false), d, i) unselectShape(d3.select(this).classed('_s_',false), d, i)
} }
}) })
} }
c3.unselect = function (indices) { c3.unselect = function (indices) {
if ( ! __data_selection_enabled) return if ( ! __data_selection_enabled) return
main.selectAll('.target-circles').selectAll('.target-circle').each(function(d,i){ main.selectAll('.__shapes').selectAll('.__shape').each(function(d,i){
var unselectShape = (this.nodeName === 'circle') ? unselectPoint : unselectBar
if (typeof indices === 'undefined' || indices.indexOf(i) >= 0) { if (typeof indices === 'undefined' || indices.indexOf(i) >= 0) {
if (__data_selection_grouped || __data_selection_isselectable(d)) { if (__data_selection_grouped || __data_selection_isselectable(d)) {
unselectPoint(d3.select(this).classed('_s_',false), d, i) unselectShape(d3.select(this).classed('_s_',false), d, i)
} }
} }
}) })

Write Preview
Loading…
Cancel
Save