D3.js d3.select(此)不是选择rect
我想做一个柱状图,从中提取一些数据 该项目是FCC d3项目的一部分 当你将鼠标移到每个条上时,我试图在每个条上创建一个div工具提示 但是,我似乎无法获得“x”属性。当我悬停在一个条上时,它在控制台中说:D3.js d3.select(此)不是选择rect,d3.js,this,D3.js,This,我想做一个柱状图,从中提取一些数据 该项目是FCC d3项目的一部分 当你将鼠标移到每个条上时,我试图在每个条上创建一个div工具提示 但是,我似乎无法获得“x”属性。当我悬停在一个条上时,它在控制台中说: TypeError: r.getAttribute is not a function at _t.yl [as attr] (d3.v4.min.js:4) at SVGRectElement.svg.selectAll.data.enter.append.attr.att
TypeError: r.getAttribute is not a function
at _t.yl [as attr] (d3.v4.min.js:4)
at SVGRectElement.svg.selectAll.data.enter.append.attr.attr.attr.attr.attr.on.d (barchart.js:70)
at SVGRectElement.<anonymous> (d3.v4.min.js:2)
其余代码供参考:
$('document').ready(function() {
const url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
$.getJSON(url, function(json) {
const data = json.data;
const margin = {
top: 30,
right: 10,
bottom: 30,
left: 75
};
const w = 1000;
const h = 500;
const padding = 20;
const minDate = new Date(data[0][0]);
const maxDate = new Date(data[274][0]);
const xScale = d3.scaleTime()
.domain([minDate, maxDate])
.range([margin.left, w - margin.right]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => { return d[1] })])
.range([h - margin.bottom, margin.top]);
const colorScale = d3.scaleLinear()
.domain([0, d3.max(data, d => { return d[1] })])
.range([0, 255]);
const xAxis = d3.axisBottom(xScale)
.ticks(d3.timeYear.every(5));
const yAxis = d3.axisLeft(yScale);
var div = d3.select('body')
.append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
const svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d, i) => {
return xScale(new Date(d[0]));
})
.attr('y', d => {
return yScale(d[1]) - padding;
})
.attr('width', Math.round(w / data.length))
.attr('height', d => {
return h - yScale(d[1]);
})
.attr('fill', d => {
return `rgb(50, 50, ${Math.floor(colorScale(d[1]))})`;
})
.on('mouseover', d => {
console.log(d3.select(this).attr('x'));
});
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(0, ${h - padding})`)
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxis);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr('x', - margin.top)
.attr("y", margin.left + padding)
.style("text-anchor", "end")
.text("Gross Domestic Product, USA");
});
});
如果希望d3定义此,则不能使用箭头函数,如下所述: 箭头函数不会创建自己的此上下文,因此
此
具有封闭上下文的原始含义
以下内容将按您的预期工作:
.on('mouseover', function(d) {
console.log(d3.select(this).attr('x'));
});
如果希望d3定义此,则不能使用箭头函数,如下所述: 箭头函数不会创建自己的此上下文,因此
此
具有封闭上下文的原始含义
以下内容将按您的预期工作:
.on('mouseover', function(d) {
console.log(d3.select(this).attr('x'));
});