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

Implement toLine and toBar interfaces

pull/1/head
Masayuki Tanaka 12 years ago committed by masayuki
parent
d1ae9f8e7a
commit
2f6cc38132
1 changed files with 91 additions and 42 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. 133
      c3.js

133
c3.js
Unescape View File

@ -203,10 +203,20 @@
})() })()
} }
// For main region
var lineOnMain = function (d) {
return isLineType(d) ? lineWithRegions(d.values, __data_regions[d.id]) : ""//"M 0 0"
}
// For brush region // For brush region
var line2 = d3.svg.line() var lineOnSub = (function () {
.x(function(d){ return x2(d.x) }) var line = d3.svg.line()
.y(function(d){ return y2(d.value) }) .x(function(d){ return x2(d.x) })
.y(function(d){ return y2(d.value) })
return function (d) {
return isLineType(d) ? line(d.values) : ""//"M 0 0"
}
})()
// For region // For region
var regionStart = function (d) { var regionStart = function (d) {
@ -424,6 +434,13 @@
return __data_types[id] === 'bar' return __data_types[id] === 'bar'
} }
function lineData (d) {
return isLineType(d) ? d.values : []
}
function barData (d) {
return isBarType(d) ? d.values : []
}
//-- Color --// //-- Color --//
function generateColor (_colors, _pattern) { function generateColor (_colors, _pattern) {
@ -971,37 +988,69 @@
} }
// lines and cricles // lines and cricles
mainPath = main.selectAll('.target').selectAll('.target-line').filter(isLineType) main.selectAll('.target-line')
if (withTransition) mainPath = mainPath.transition() .transition().duration(withTransition ? 100 : 0)
mainPath.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]) }) .attr("d", lineOnMain)
mainCircle = main.selectAll('.target').selectAll('.target-circle').filter(isLineType) mainCircle = main.selectAll('.target-circles').selectAll('.target-circle')
if (withTransition) mainCircle = mainCircle.transition() .data(lineData)
mainCircle.attr("cx", function(d) { return x(d.x) }) mainCircle.transition().duration(withTransition ? 100 : 0)
.attr("cy", function(d) { return y(d.value) }) .attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
mainCircle.enter().append("circle")
.attr("class", function(d,i){ return "target-circle target-circle-" + i })
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
.attr("r", __point_r)
mainCircle.exit()
.attr("y", 0)
.remove()
// bars // bars
barW = getBarW(xAxis, barTargetsNum) barW = getBarW(xAxis, barTargetsNum)
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').selectAll('.target-bar').filter(isBarType) mainBar = main.selectAll('.target-bars').selectAll('.target-bar')
if (withTransition) mainBar = mainBar.transition() .data(barData)
mainBar.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH) mainBar.transition().duration(withTransition ? 100 : 0)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
mainBar.enter().append('rect')
.attr("class", function(d,i){ return "target-bar target-bar-" + i })
.attr("x", barX).attr("y", height).attr("width", barW).attr("height", 0)
.style("opacity", 0)
.transition()
.attr('y', barY).attr('height', barH)
.style('opacity', 1)
mainBar.exit().transition()
.attr('y', height).attr('height', 0)
.style('opacity', 0)
.remove()
// subchart // subchart
if (withSubchart && __subchart_show) { if (withSubchart && __subchart_show) {
contextPath = context.selectAll('.target').selectAll('path').filter(isLineType) context.selectAll('.target-line')
if (withTransition) contextPath = contextPath.transition() .transition().duration(withTransition ? 100 : 0)
contextPath.attr("d", function(d){ return line2(d.values) }) .attr("d", lineOnSub)
// bars // bars
barW = getBarW(xAxis2, barTargetsNum) barW = getBarW(xAxis2, barTargetsNum)
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').selectAll('.target-bar').filter(isBarType) contextBar = context.selectAll('.target-bars').selectAll('.target-bar')
if (withTransition) contextBar = contextBar.transition() .data(barData)
contextBar.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH) contextBar.transition().duration(withTransition ? 100 : 0)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
contextBar.enter().append('rect')
.attr("class", function(d,i){ return "target-bar target-bar-" + i })
.attr("x", barX).attr("y", height2).attr("width", barW).attr("height", 0)
.style("opacity", 0)
.transition()
.attr('y', barY).attr('height', barH)
.style('opacity', 1)
contextBar.exit().transition()
.attr('y', height2).attr('height', 0).style('opacity', 0)
.remove()
} }
// circles for select // circles for select
@ -1037,23 +1086,21 @@
f.append("path") f.append("path")
.attr("class", function(d){ return "target-line target-line-" + d.id }) .attr("class", function(d){ return "target-line target-line-" + d.id })
.style("stroke", function(d) { return color(d.id) }) .style("stroke", function(d) { return color(d.id) })
.filter(isLineType) .attr("d", lineOnMain)
.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[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", function(d){ return "target-circles target-circles-" + d.id })
.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 })
.filter(isLineType)
.selectAll("circle") .selectAll("circle")
.data(function(d){ return d.values }) .data(lineData)
.enter().append("circle") .enter().append("circle")
.attr("class", function(d,i){ return "target-circle target-circle-" + i }) .attr("class", function(d,i){ return "target-circle target-circle-" + i })
.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)
// Rects for each data // Rects for each data
@ -1068,9 +1115,8 @@
.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("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null }) .style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
.filter(isBarType)
.selectAll("bar") .selectAll("bar")
.data(function(d){ return d.values }) .data(barData)
.enter().append("rect") .enter().append("rect")
.attr("class", function(d,i){ return "target-bar target-bar-" + i }) .attr("class", function(d,i){ return "target-bar target-bar-" + i })
.attr("x", barX) .attr("x", barX)
@ -1082,24 +1128,21 @@
main.selectAll('.target-line') main.selectAll('.target-line')
.data(targets) .data(targets)
.filter(isLineType)
.transition() .transition()
.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]) }) .attr("d", lineOnMain)
main.selectAll('.target-circles') main.selectAll('.target-circles')
.data(targets) .data(targets)
.filter(isLineType)
.selectAll('circle') .selectAll('circle')
.data(function(d){ return d.values }) .data(lineData)
.transition() .transition()
.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) })
main.selectAll(".target-bars") main.selectAll(".target-bars")
.data(targets) .data(targets)
.filter(isBarType)
.selectAll('rect') .selectAll('rect')
.data(function(d){ return d.values }) .data(barData)
.transition() .transition()
.attr("x", barX) .attr("x", barX)
.attr("y", barY) .attr("y", barY)
@ -1120,8 +1163,7 @@
c.append("path") c.append("path")
.attr("class", function(d){ return "target-line target-line-" + d.id }) .attr("class", function(d){ return "target-line target-line-" + d.id })
.style("stroke", function(d) { return color(d.id) }) .style("stroke", function(d) { return color(d.id) })
.filter(isLineType) .attr("d", lineOnSub)
.attr("d", function(d){ return line2(d.values) })
// Rects for each data // Rects for each data
barW = getBarW(xAxis2, barTargetsNum) barW = getBarW(xAxis2, barTargetsNum)
@ -1132,9 +1174,8 @@
c.append('g') c.append('g')
.attr("class", function(d){ return "target-bars target-bars-" + d.id }) .attr("class", function(d){ return "target-bars target-bars-" + d.id })
.style("fill", function(d){ return color(d.id) }) .style("fill", function(d){ return color(d.id) })
.filter(isBarType)
.selectAll("bar") .selectAll("bar")
.data(function(d){ return d.values }) .data(barData)
.enter().append("rect") .enter().append("rect")
.attr("class", function(d,i){ return "target-bar target-bar-" + i }) .attr("class", function(d,i){ return "target-bar target-bar-" + i })
.attr("x", barX) .attr("x", barX)
@ -1146,15 +1187,13 @@
context.selectAll('.target-line') context.selectAll('.target-line')
.data(targets) .data(targets)
.filter(isLineType)
.transition() .transition()
.attr("d", function(d){ return line2(d.values) }) .attr("d", lineOnSub)
context.selectAll(".target-bars") context.selectAll(".target-bars")
.data(targets) .data(targets)
.filter(isBarType)
.selectAll('rect') .selectAll('rect')
.data(function(d){ return d.values }) .data(barData)
.transition() .transition()
.attr("x", barX) .attr("x", barX)
.attr("y", barY) .attr("y", barY)
@ -1406,6 +1445,16 @@
}) })
} }
c3.toLine = function (target) {
__data_types[target] = 'line'
update(true, true, true)
}
c3.toBar = function (target) {
__data_types[target] = 'bar'
update(true, true, true)
}
/*-- Load data and init chart with defined functions --*/ /*-- Load data and init chart with defined functions --*/
if ('url' in config.data) { if ('url' in config.data) {

Write Preview
Loading…
Cancel
Save