Skip to content

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

Implement toLine and toBar interfaces

parent d1ae9f8e
Show whitespace changes
Inline Side-by-side
Showing with 89 additions and 40 deletions
c3.js
View file @ 2f6cc381
......@@ -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
var line2 = d3.svg.line()
var lineOnSub = (function () {
var line = d3.svg.line()
.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
var regionStart = function (d) {
......@@ -424,6 +434,13 @@
return __data_types[id] === 'bar'
}
function lineData (d) {
return isLineType(d) ? d.values : []
}
function barData (d) {
return isBarType(d) ? d.values : []
}
//-- Color --//
function generateColor (_colors, _pattern) {
......@@ -971,37 +988,69 @@
}
// lines and cricles
mainPath = main.selectAll('.target').selectAll('.target-line').filter(isLineType)
if (withTransition) mainPath = mainPath.transition()
mainPath.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]) })
mainCircle = main.selectAll('.target').selectAll('.target-circle').filter(isLineType)
if (withTransition) mainCircle = mainCircle.transition()
mainCircle.attr("cx", function(d) { return x(d.x) })
.attr("cy", function(d) { return y(d.value) })
main.selectAll('.target-line')
.transition().duration(withTransition ? 100 : 0)
.attr("d", lineOnMain)
mainCircle = main.selectAll('.target-circles').selectAll('.target-circle')
.data(lineData)
mainCircle.transition().duration(withTransition ? 100 : 0)
.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
barW = getBarW(xAxis, barTargetsNum)
barH = getBarH(y, height)
barX = getBarX(x, barW, barTargetsNum, barIndices)
barY = getBarY(y)
mainBar = main.selectAll('.target').selectAll('.target-bar').filter(isBarType)
if (withTransition) mainBar = mainBar.transition()
mainBar.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
mainBar = main.selectAll('.target-bars').selectAll('.target-bar')
.data(barData)
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
if (withSubchart && __subchart_show) {
contextPath = context.selectAll('.target').selectAll('path').filter(isLineType)
if (withTransition) contextPath = contextPath.transition()
contextPath.attr("d", function(d){ return line2(d.values) })
context.selectAll('.target-line')
.transition().duration(withTransition ? 100 : 0)
.attr("d", lineOnSub)
// bars
barW = getBarW(xAxis2, barTargetsNum)
barH = getBarH(y2, height2)
barX = getBarX(x2, barW, barTargetsNum, barIndices)
barY = getBarY(y2)
contextBar = context.selectAll('.target').selectAll('.target-bar').filter(isBarType)
if (withTransition) contextBar = contextBar.transition()
contextBar.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
contextBar = context.selectAll('.target-bars').selectAll('.target-bar')
.data(barData)
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
......@@ -1037,23 +1086,21 @@
f.append("path")
.attr("class", function(d){ return "target-line target-line-" + d.id })
.style("stroke", function(d) { return color(d.id) })
.filter(isLineType)
.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]) })
.attr("d", lineOnMain)
// Circles for each data point on lines
f.append('g')
.attr("class", function(d){ return "selected-circles selected-circles-" + d.id })
f.append('g')
.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 })
.filter(isLineType)
.selectAll("circle")
.data(function(d){ return d.values })
.data(lineData)
.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("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
.attr("r", __point_r)
// Rects for each data
......@@ -1068,9 +1115,8 @@
.style("fill", 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 })
.filter(isBarType)
.selectAll("bar")
.data(function(d){ return d.values })
.data(barData)
.enter().append("rect")
.attr("class", function(d,i){ return "target-bar target-bar-" + i })
.attr("x", barX)
......@@ -1082,24 +1128,21 @@
main.selectAll('.target-line')
.data(targets)
.filter(isLineType)
.transition()
.attr("d", function(d){ return lineWithRegions(d.values, __data_regions[d.id]) })
.attr("d", lineOnMain)
main.selectAll('.target-circles')
.data(targets)
.filter(isLineType)
.selectAll('circle')
.data(function(d){ return d.values })
.data(lineData)
.transition()
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.value) })
main.selectAll(".target-bars")
.data(targets)
.filter(isBarType)
.selectAll('rect')
.data(function(d){ return d.values })
.data(barData)
.transition()
.attr("x", barX)
.attr("y", barY)
......@@ -1120,8 +1163,7 @@
c.append("path")
.attr("class", function(d){ return "target-line target-line-" + d.id })
.style("stroke", function(d) { return color(d.id) })
.filter(isLineType)
.attr("d", function(d){ return line2(d.values) })
.attr("d", lineOnSub)
// Rects for each data
barW = getBarW(xAxis2, barTargetsNum)
......@@ -1132,9 +1174,8 @@
c.append('g')
.attr("class", function(d){ return "target-bars target-bars-" + d.id })
.style("fill", function(d){ return color(d.id) })
.filter(isBarType)
.selectAll("bar")
.data(function(d){ return d.values })
.data(barData)
.enter().append("rect")
.attr("class", function(d,i){ return "target-bar target-bar-" + i })
.attr("x", barX)
......@@ -1146,15 +1187,13 @@
context.selectAll('.target-line')
.data(targets)
.filter(isLineType)
.transition()
.attr("d", function(d){ return line2(d.values) })
.attr("d", lineOnSub)
context.selectAll(".target-bars")
.data(targets)
.filter(isBarType)
.selectAll('rect')
.data(function(d){ return d.values })
.data(barData)
.transition()
.attr("x", barX)
.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 --*/
if ('url' in config.data) {
......
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