Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// Set the ranges
var x = d3.time.scale().range([margin.left - 30, width - margin.right]);
var prevBackupsX = d3.time.scale().range([0, width - margin.right]);
// Define the axes
function getTicks(period) {
switch(period) {
case "year":
return 5;
break;
default: return 7;
}
}
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(getTicks(this.state.period))
.tickSize(0)
.tickFormat(d3.time.format(tickFormat));
// Adds the svg canvas
var svg = d3.select("#copy-history .inside")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append('svg:rect')
.attr('width', width)
.attr('height', 40)
.attr('transform', 'translate('+ [0,55]+')' )
canvas
.attr('width', width)
.attr('height', height);
const context = canvas.node().getContext('2d');
context.imageSmoothingEnabled = false;
// update the y scale, based on the data extents
const ext = extent || d3.extent(data, d => d.y);
const max = Math.max(-ext[0], ext[1]);
y.domain([0, max]);
// x = d3.scaleTime().domain[];
axis = d3.svg.axis(x).ticks(5);
context.clearRect(0, 0, width, height);
// context.translate(0.5, 0.5);
// the data frame currently being shown:
const startIndex = Math.floor(Math.max(0, -(offsetX / step)));
const endIndex = Math.floor(Math.min(data.length, startIndex + (width / step)));
// skip drawing if there's no data to be drawn
if (startIndex > data.length) {
return;
}
// we are drawing positive & negative bands separately to avoid mutating canvas state
// http://www.html5rocks.com/en/tutorials/canvas/performance/
let negative = false;
setupScales: function() {
var xdomain = this.model.get('xdomain'),
ydomain = this.model.get('ydomain'),
type = this.model.get('type');
this.state.xscales = this.makeScales('x', xdomain, [0+5, this.state.w-5], type);
this.state.yscales = this.makeScales('y', ydomain, [this.state.h, 10], 'num');
// create axes
this.state.xaxis = d3.svg.axis()
.scale(this.state.xscales)
.orient('bottom');
this.state.yaxis = d3.svg.axis()
.scale(this.state.yscales)
.orient('left');
var nticks = util.estNumXTicks(
this.state.xaxis,
this.model.get('type'),
this.state.w
);
util.setAxisLabels(this.state.xaxis, this.model.get('type'), nticks);
this.state.yaxis.ticks(2).tickSize(0,0);
},
})
}
})
// initialize radii
outerRadius = (width > height) ? (height / 2) - 60 : (width / 2) - 5;
innerRadius = 5;
cg.attr('transform', `translate(${width / 2 - outerRadius}, ${2 * outerRadius + 30})`)
layout = d3.layout.pie()
.value((d) => d.value)
.padAngle((d) => 3 * Math.PI / 180)
.sort(null);
arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius((d) => outerRadius * (d.data.value / (d.data.slots + 10)));
paths = g.selectAll('paths.spellcircle-section').data(layout(data));
labels = lg.selectAll('text.spellcircle-label').data(layout(data));
cantrips = cg.selectAll('rect.spellcircle-cantrips').data(dataCantrip);
cantripLabel = cg.selectAll('text.spellcircle-label').data(dataCantrip);
// Entering
paths.enter()
.append('path')
.attr('class', 'spellcircle-section')
.attr('style', 'stroke-width: 2px')
.attr('fill', '#d9edf7')
.attr('d', arc);
for (let i = 0; i < data.length; i++) {
if (i == 0)
cumValues.push({'id': 0, 'chr': data[i][0], 'pos': 0});
else
cumValues.push({'id': i, 'chr': data[i][0], 'pos': cumValues[i-1].pos + +data[i-1][1]});
}
gAxis = gSelect.append('g')
.classed('x axis', true);
console.log('cumValues:', cumValues);
let bisect = d3.bisector(function(d) { return d.pos; }).left;
xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.tickValues(function() {
if (xScale != null) {
console.log('xScale.domain()[0]', xScale.domain()[0], xScale.domain()[1])
console.log('bs0:', bisect(cumValues, xScale.domain()[0]))
console.log('bs1:', bisect(cumValues, xScale.domain()[1]))
let ticks = xScale.ticks(3);
let chrLeft = bisect(cumValues, ticks[0]);
let chrRight = bisect(cumValues, ticks[ticks.length-1]);
if (chrLeft != chrRight) {
let ticks = xScale.ticks(3);
console.log('ticks:', ticks);
return ticks;
const getYAxisWidth = (id, config) => {
if (config.padding.hasCustomPadding) {
return config.padding.left;
}
const scale = d3.scale
.ordinal()
.domain(getYAxisDomain(config.axis.y.trackList))
.range([0, ...getYAxisRange(config.axis.y.trackList)]);
const axis = d3.svg
.axis()
.scale(scale)
.orient(AXES_ORIENTATION.Y.LEFT);
const dummy = d3.select("body").append("div");
const svg = dummy.append("svg");
const yAxisSVG = svg.append("g").call(axis);
const width = yAxisSVG.node().getBoundingClientRect().width;
dummy.remove();
return width;
};
/**
.pie()
.value(function(d) {
return d.value;
})
.sort(null)
.padAngle(0.03);
var w = 200,
h = 200;
var outerRadius = w / 2;
var innerRadius = 75;
var color = d3.scale.category10();
var arc = d3.svg
.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);
var svg = d3
.select(`#${element}`)
.append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('viewBox', -w / 2 + ' ' + -h / 2 + ' ' + w + ' ' + h)
.attr('preserveAspectRatio', 'xMinYMin')
.append('g');
var path = svg
.selectAll('path')
.data(pie(dataset))
.enter()
if (value > max) max = Math.ceil(value);
if (value < min) min = Math.floor(value);
});
});
const yscale = d3.scale
.linear()
.domain([min * 0.99, max * 1.01])
.range([height, 0]);
const chart = box()
.whiskers(calcIqr(1.5))
.width(boxWidth - 2 * margin.inner)
.height(height)
.domain([min * 0.99, max * 1.01]);
const xAxis = d3.svg
.axis()
.scale(xscale)
.orient("bottom");
const yAxis = d3.svg
.axis()
.scale(yscale)
.orient("left");
const xLines = d3.svg
.axis()
.scale(xscale)
.tickSize(height)
.orient("bottom");
const yLines = d3.svg
function createAreaChart(data) {
var div = document.createElement('div');
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = data.width - margin.left - margin.right,
height = data.height - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.xValue); })
.y0(height)
.y1(function(d) { return y(d.yValue); });
var svg = d3.select(div).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
if(self.updates["update_y"])
{
var total_width = self.options.width;
var total_height = self.options.height;
var width = Math.min(self.options.width, self.options.height);
var height = Math.min(self.options.width, self.options.height);
var width_offset = (total_width - width) / 2
var height_offset = (total_height - height) / 2
var range = [total_height - height_offset - self.options.border - 40, 0 + height_offset + self.options.border];
var range_canvas = [height - (2 * self.options.border) - 40, 0];
self.y_axis_offset = 0 + width_offset + self.options.border;
self.y_scale = self._createScale(self.options.y_string, self.options.scale_y, range, false);
self.y_scale_canvas = self._createScale(self.options.y_string, self.options.scale_y, range_canvas, false);
self.y_axis = d3.svg.axis().scale(self.y_scale).orient("left");
self.y_axis_layer
.attr("transform", "translate(" + self.y_axis_offset + ",0)")
.call(self.y_axis)
;
}
if(self.updates["update_indices"])
{
self.inverse_indices = {};
var count = self.options.indices.length;
for(var i = 0; i != count; ++i)
self.inverse_indices[self.options.indices[i]] = i;
}
if(self.updates["update_x_label"])
{