//based on candlestick6panzoooom.html
var candleWidth = 20;
var candleGap = 40;
var candleMargin = 10;
var wickThickness = "2";
var hLineColor = "#b5b6b7";
var margin = {top: 20, right: 20, bottom: 20, left: 60},
width = 940 - margin.left - margin.right,
height = 640 - margin.top - margin.bottom;
var rand = [];
var data = [{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 13.99,
Low: 0.007,
Open: 0.75,
Close: 12.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
},{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 13.99,
Low: 0.007,
Open: 0.75,
Close: 12.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
},{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 13.99,
Low: 0.007,
Open: 0.75,
Close: 12.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
},{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 13.99,
Low: 0.007,
Open: 0.75,
Close: 12.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
},{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t },{
Date: 01/12/15,
High: 3.99,
Low: 0.007,
Open: 0.75,
Close: 2.04
}, {
Date: 02/12/15,
High: 4.976,
Low: 0.001,
Open: 2.514,
Close: 2.88
\t \t \t },{
Date: 01/12/15,
High: 2.99,
Low: 0.0007,
Open: 1.75,
Close: 1.04
}, {
Date: 02/12/15,
High: 5.976,
Low: 0.001,
Open: 1.514,
Close: 3.88
\t \t \t }
\t ];
var maxi = d3.max(data, function(d) {
return d.value;
});
var maxLow = d3.min(data.map(function(x) {
return x["Low"];
}))
var maxHigh = d3.max(data.map(function(x) {
return x["High"];
}))
var maxMinDiff = (maxHigh - maxLow) * 0.1;
function min(a, b) {
return a < b ? a : b;
};
function max(a, b) {
return a > b ? a : b;
};
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width);
var x = d3.scale.linear().domain([-width/2, width/2]).range([0, width]);
var y = d3.scale.linear()
.domain([maxLow - maxMinDiff, maxHigh + maxMinDiff]) //changed to reflect new variables for lowest, highest and difference to define input domain
.range([height, 0]); //range has still not been modified ... remember x,y have been reversed to reflect y,x
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 32])
.on("zoom", zoomed);
var chart = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var grid = chart.append("g")
.attr("class", "gridding");
var lines = grid.selectAll("line.y")
.data(y.ticks(20))
.enter()
.append("svg:line")
.attr("class", "y")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", y)
.attr("y2", y)
.attr("stroke", hLineColor);
var numbers = grid.selectAll("text.yrule")
.data(y.ticks(10))
.enter()
.append("svg:text")
.attr("class", "yrule")
.attr("x", 0)
.attr("y", y)
.attr("dy", 0)
.attr("dx", 20)
.style("fill", "#b5b6b7")
.attr("text-anchor", "middle")
// chart.append("clipPath")
// .attr("id", "clip")
// .append("rect")
// .attr("width", width)
// .attr("height", height);
//
// chart.append("rect")
// .attr("class", "pane")
// .attr("width", width)
// .attr("height", height)
// .call(zoom)
// .style("fill","none")
// .style("pointer-events", "all");
var candlestick = chart.append("g")
.attr("clip-path", "url(#clip)")
.append("g")
.attr("class", "candlesticks")
function buildChart(data) {
var wicks = candlestick.selectAll("wick")
.data(data)
.enter()
.append("line")
.attr("x1", function(d, i) {
return candleMargin + candleWidth/2 + (candleGap * i);
})
.attr("x2", function(d, i) {
return candleMargin + candleWidth/2 + (candleGap * i);
})
.attr("y1", function(d) {
return y(max(d.High, d.Low));
})
.attr("y2", function(d) {
return y(min(d.High, d.Low));
})
.attr("stroke", function(d) {
return d.Open > d.Close ? "#a01f1b" : "#1ba048";
})
.attr("stroke-width", wickThickness);
var candle = candlestick.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return candleMargin + (candleGap * i);
})
.attr("y", function(d) {
return y(max(d.Open, d.Close));
})
.attr("height", function(d) {
return y(min(d.Open, d.Close)) - y(max(d.Open, d.Close));
})
.attr("width", function(d) {
return candleWidth
})
.attr("fill", function(d) {
return d.Open > d.Close ? "#a01f1b" : "#1ba048";
})
.style("opacity", "0.5")
\t \t .on("mouseover", function(d){d3.select(this).style("opacity", "1") });
}
buildChart(data);
\t \t var movingAvg = function (data, neighbors)
\t \t \t {
\t \t \t \t console.log("neighbours is: "+neighbors)
\t \t \t \t return data.map(function(val, idx, arr)
\t \t \t \t {
\t \t \t let start = Math.max(0, idx - neighbors)
\t \t \t \t let end = idx + neighbors
\t \t \t let subset = arr.slice(start, end + 1)
\t \t \t let sum = subset.reduce((a,b) => a + b)
\t \t \t \t console.log(sum)
\t \t \t return sum/subset.length
\t \t \t \t })
\t \t \t } \t
\t \t
\t \t \t var band = []
// \t \t \t for(var j = 0; j < 100; j++)
// \t \t \t \t {
// \t \t \t \t \t band.push(250*(Math.random()))
// \t \t \t \t }
// \t \t \t for(var i = 0; i < data.length; i++)
// \t \t \t {
// \t \t \t \t band.push(data[i].Close)
// \t \t \t \t console.log(band[i])
// \t \t \t }
\t \t \t \t var dataAvg = movingAvg(band, 0) \t
\t \t \t \t var avgX = d3.scale
\t \t \t \t .linear()
\t \t \t \t .domain([0, data.length])
\t \t \t \t //.range([0, width])
\t \t \t \t .range([0, (candleMargin + (candleGap * data.length))])
\t \t \t \t var avgY = d3.scale
\t \t \t \t \t .linear()
\t \t \t \t \t .domain([0, height])
\t \t \t \t \t .rangeRound([height/2,height])
\t \t \t \t var avg = candlestick.append("g").attr("class", "average")
\t \t \t \t var curvedLine =
\t \t \t \t \t
\t \t \t \t \t d3.svg.line()
\t \t \t \t \t .x((d,i) => avgX(i))
\t \t \t \t \t .y(d => avgY(d))
\t \t \t \t \t .interpolate("basis")
\t \t \t \t \t \t
\t \t \t \t \t \t avg.append('path')
\t \t \t \t \t \t .attr('class', 'avg')
\t \t \t \t \t \t .datum(dataAvg)
\t \t \t \t \t \t .attr('d', curvedLine)
\t \t \t \t \t .attr("fill", "none")
\t \t \t \t \t \t .attr("stroke", "red")
\t \t \t \t \t \t .attr("stroke-width", 1)
\t \t \t
\t \t
\t \t
\t \t
\t \t
function zoomed() {
candlestick.attr("transform", "translate(" + d3.event.translate[0] + ")")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
谢谢你，我现在用d3.select（这一点），但它只是改变了一个元素，我悬停在不透明度。我想这样做： .on（“mouseover”，function（d.column）{d3.select（this）.style（“opacity”，1）}） 这似乎并不工作 –
你是否在使用组？ –
谢谢你，只是问另一个关于分组的问题：http://stackoverflow.com/questions/43443265/group-by-object-attributes-in-array# –