|
var chart = new d3Kit.Skeleton('#chart', { |
|
margin: {top: 60, right: 60, bottom: 60, left: 60}, |
|
initialWidth: 800, |
|
initialHeight: 460 |
|
}) |
|
.autoResize('width') |
|
.on('resize', visualize) |
|
.on('data', visualize); |
|
|
|
// Everything you need to setup your chart is above this line. |
|
// The code below are just used to display the diagram above. |
|
|
|
var svg = chart.getSvg(); |
|
var g = chart.getRootG(); |
|
var options = chart.options(); |
|
|
|
var layers = chart.getLayerOrganizer(); |
|
layers.create(['content', 'x-axis', 'y-axis', {label: ['innerWidth', 'innerHeight', 'width', 'height']}]); |
|
|
|
var x = d3.scaleIdentity() |
|
.domain([0, chart.getInnerWidth()]); |
|
|
|
var y = d3.scaleIdentity() |
|
.domain([0, chart.getInnerHeight()]); |
|
|
|
var xAxis = d3.axisBottom() |
|
.scale(x); |
|
|
|
var yAxis = d3.axisRight() |
|
.scale(y); |
|
|
|
var defs = svg.append('defs'); |
|
|
|
defs.append('marker') |
|
.attr('id', 'triangle-end') |
|
.attr('viewBox', '0 0 10 10') |
|
.attr('refX', 10) |
|
.attr('refY', 5) |
|
.attr('markerWidth', 6) |
|
.attr('markerHeight', 6) |
|
.attr('orient', 'auto') |
|
.append('path') |
|
.attr('d', 'M 0 0 L 10 5 L 0 10 z'); |
|
|
|
var innerRect = layers.get('content').append('rect') |
|
.attr('class', 'inner'); |
|
|
|
var lines = { |
|
origin: svg.append('line') |
|
.attr('class', 'arrow') |
|
.attr('marker-end', 'url(#triangle-end)'), |
|
top: svg.append('line') |
|
.attr('class', 'arrow') |
|
.attr('marker-end', 'url(#triangle-end)'), |
|
bottom: svg.append('line') |
|
.attr('class', 'arrow') |
|
.attr('marker-end', 'url(#triangle-end)'), |
|
left: svg.append('line') |
|
.attr('class', 'arrow') |
|
.attr('marker-end', 'url(#triangle-end)'), |
|
right: svg.append('line') |
|
.attr('class', 'arrow') |
|
.attr('marker-end', 'url(#triangle-end)'), |
|
}; |
|
|
|
svg.append('circle') |
|
.attr('class', 'origin') |
|
.attr('r', 4.5); |
|
|
|
svg.append('text') |
|
.text('origin') |
|
.attr('x', 15) |
|
.attr('y', 12); |
|
|
|
g.append('text') |
|
.text('translate(margin.left, margin.top)') |
|
.attr('y', -8); |
|
|
|
createCenterLabel(layers.get('label.innerWidth'), 'skeleton.getInnerWidth()'); |
|
createLeftLabel(layers.get('label.innerHeight'), 'skeleton.getInnerHeight()'); |
|
createLeftLabel(layers.get('label.width'), 'skeleton.width()'); |
|
createLeftLabel(layers.get('label.height'), 'skeleton.height()'); |
|
|
|
function visualize(){ |
|
x.domain([0, chart.getInnerWidth()]); |
|
y.domain([0, chart.getInnerHeight()]); |
|
|
|
innerRect |
|
.attr('width', chart.getInnerWidth()) |
|
.attr('height', chart.getInnerHeight()); |
|
|
|
layers.get('x-axis') |
|
.attr('transform', 'translate(0,' + chart.getInnerHeight() + ')') |
|
.call(xAxis); |
|
|
|
layers.get('y-axis') |
|
.attr('transform', 'translate(' + chart.getInnerWidth() + ',0)') |
|
.call(yAxis); |
|
|
|
lines.origin |
|
.attr('x2', options.margin.left) |
|
.attr('y2', options.margin.top); |
|
|
|
lines.top |
|
.attr('x1', chart.width() / 2) |
|
.attr('x2', chart.width() / 2) |
|
.attr('y2', options.margin.top); |
|
|
|
lines.bottom |
|
.attr('x1', chart.width() / 2) |
|
.attr('x2', chart.width() / 2) |
|
.attr('y1', chart.height()) |
|
.attr('y2', chart.height() - options.margin.bottom); |
|
|
|
lines.left |
|
.attr('x2', options.margin.left) |
|
.attr('y1', chart.height() / 2) |
|
.attr('y2', chart.height() / 2); |
|
|
|
lines.right |
|
.attr('x1', chart.width()) |
|
.attr('x2', chart.width() - options.margin.right) |
|
.attr('y1', chart.height() / 2) |
|
.attr('y2', chart.height() / 2); |
|
|
|
layers.get('label.innerWidth') |
|
.attr('transform', 'translate('+(chart.getInnerWidth()/2)+','+(20+3)+')'); |
|
|
|
layers.get('label.innerHeight') |
|
.attr('transform', 'translate('+(10)+','+(chart.getInnerHeight()/2+3)+')'); |
|
|
|
layers.get('label.width') |
|
.attr('transform', 'translate('+(chart.getInnerWidth()/2 + 10)+','+(20 - options.margin.top)+')'); |
|
|
|
layers.get('label.height') |
|
.attr('transform', 'translate('+(10 - options.margin.left)+','+(chart.getInnerHeight()/2 - 23)+')'); |
|
} |
|
|
|
function createCenterLabel(container, text){ |
|
var label = container |
|
.append('text') |
|
.classed('skeleton-label', true) |
|
.text(text) |
|
.style('text-anchor', 'middle'); |
|
|
|
var bbox = label.node().getBBox(); |
|
|
|
container |
|
.insert('rect', ':first-child') |
|
.attr('x', -bbox.width/2 - 4) |
|
.attr('y', -bbox.height/2 - 8) |
|
.attr('width', bbox.width + 8) |
|
.attr('height', bbox.height + 8) |
|
.style('fill', '#D1625B'); |
|
} |
|
|
|
function createLeftLabel(container, text){ |
|
var label = container |
|
.append('text') |
|
.classed('skeleton-label', true) |
|
.text(text); |
|
|
|
var bbox = label.node().getBBox(); |
|
|
|
container |
|
.insert('rect', ':first-child') |
|
.attr('x', - 4) |
|
.attr('y', -bbox.height/2 - 8) |
|
.attr('width', bbox.width + 8) |
|
.attr('height', bbox.height + 8) |
|
.style('fill', '#D1625B'); |
|
} |
