我需要一些帮助，将鼠标悬停事件上的整个列（或列组）的不透明度设置为1，将鼠标悬停在d3列中的任何对象上。
以下是代码：
var svg = d3.select("#right-section").append("svg").attr("width",600).attr("height",600);
var flatInputMatrix = [1,1,1,0,0,3,3,3,0,0,4,4,4,0,0,5,5,5,0,0,0,2,0,4,4,0,0,0,5,5,0,1,0,2,2];
var m = 5;
var r = 3;
var counter = -1;
var data = flatInputMatrix.map(function(d, i) {
i % m === 0 ? counter++ : null;
return {
column: i % m,
row: counter,
value: d
};
});
var numbers = svg.selectAll("numbers").data(data).enter().append("text")
.attr("x",function(d,i) { return (i % m)*50 + 10 + r; })
.attr("y",function(d,i) { return Math.floor(i / m) *50+50; })
.style("opacity", 0.5)
.text(function(d) { return d.value; })
.on("mouseover",function(d) {return d.column.transition().style("opacity", 1); })
我知道最后一行是错的，我得到了
TypeError: d.column.transition is not a function
但我不确定如何解决这个问题。
答案 0 :(得分：1)
您希望使用d3.select(this)来获取您所犯的任何内容。
.style("opacity", "0.5")
.on("mouseover", function(d){d3.select(this).style("opacity", "1") });
//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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
},{
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
}
];
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")
.on("mouseover", function(d){d3.select(this).style("opacity", "1") });
}
buildChart(data);
var movingAvg = function (data, neighbors)
{
console.log("neighbours is: "+neighbors)
return data.map( function(val, idx, arr)
{
let start = Math.max(0, idx - neighbors)
let end = idx + neighbors
let subset = arr.slice(start, end + 1)
let sum = subset.reduce((a,b) => a + b)
console.log(sum)
return sum / subset.length
})
}
var band = []
// for(var j = 0; j < 100; j++)
// {
// band.push(250*(Math.random()))
// }
// for(var i = 0; i < data.length; i++)
// {
// band.push(data[i].Close)
// console.log(band[i])
// }
var dataAvg = movingAvg(band, 0)
var avgX = d3.scale
.linear()
.domain([0, data.length])
//.range([0, width])
.range([0, (candleMargin + (candleGap * data.length))])
var avgY = d3.scale
.linear()
.domain([0, height])
.rangeRound([height/2,height])
var avg = candlestick.append("g").attr("class", "average")
var curvedLine =
d3.svg.line()
.x((d,i) => avgX(i))
.y(d => avgY(d))
.interpolate("basis")
avg.append('path')
.attr('class', 'avg')
.datum(dataAvg)
.attr('d', curvedLine)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 1)
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>