0
我正在开发d3中的散点图，您可以使用下拉菜单更改x轴和y轴。是否可以在d3中创建动态网格线图？
我能够绘制网格线，但我的问题是重新绘制它们时，为x轴或y轴选取新值。
我希望有人能告诉我我该怎么做才能做到这一点。
这里是我的代码，到现在为止（JS）：
d3.csv('data.csv',function (data) {
// CSV section
var body = d3.select('body')
var selectData = [ { "text" : "Trust words" },
{ "text" : "Surprise words" },
{ "text" : "Sadness words" },
{ "text" : "Positive words"},
{ "text" : "Negative words"},
{ "text" : "Fear words"},
{ "text" : "Disgust words"},
{ "text" : "Anticipation words"},
{ "text" : "Anger words"},
]
// Select X-axis Variable
var span = body.append('span')
.text('Select an Emotion word for the Horizontal scale: ')
var xInput = body.append('select')
.attr('id','xSelect')
.on('change',xChange)
.selectAll('option')
.data(selectData)
.enter()
.append('option')
.attr('value', function (d) { return d.text })
.text(function (d) { return d.text ;})
body.append('br')
body.append('br')
// Select Y-axis Variable
var span = body.append('span')
.text('Select an Emotion word for the Vertical scale: ')
var yInput = body.append('select')
.attr('id','ySelect')
.on('change',yChange)
.selectAll('option')
.data(selectData)
.enter()
.append('option')
.attr('value', function (d) { return d.text })
.text(function (d) { return d.text ;})
body.append('br')
// Variables
var body = d3.select('body')
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
var h = 700 - margin.top - margin.bottom
var w = 1350 - margin.left - margin.right
var rscale = d3.scale.linear()
// Scales
var cValue = function(d) { if (parseFloat(d['Emotions words']) >=0 && parseFloat(d['Emotions words']) <= 200000) return 'Emotion Words NO: 0-200,000 inc'
else if(parseFloat(d['Emotions words']) >200000 && parseFloat(d['Emotions words']) <=350000) return 'Emotion Words NO: 200,001-350,000 inc'
else return 'Emotion words NO: >350,000'},
color = d3.scale.category10();
var xScale = d3.scale.linear()
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d['Trust words']) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d['Trust words']) })])
])
.range([0,w])
var yScale = d3.scale.linear()
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d['Trust words']) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d['Trust words']) })])
])
.range([h,0])
// SVG
var svg = body.append('svg')
.attr('height',h + margin.top + margin.bottom)
.attr('width',w + margin.left + margin.right)
.append('g')
.attr('transform','translate(' + margin.left + ',' + margin.top + ')')
// X-axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(5)
// Y-axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(5)
function make_x_axis() {
return d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
}
// Circles
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx',function (d) { return xScale(d['Trust words']) })
.attr('cy',function (d) { return yScale(d['Trust words']) })
.attr('r',function (d) { return rscale(d['Average_movie_rating'])*2;})
.attr('stroke','black')
.attr('stroke-width',1)
.attr('fill',function (d) { return color(cValue(d)); })
.on('mouseover', function() {
d3.select(this)
.transition()
.duration(500)
.attr('r',20)
.attr('stroke-width',3)
})
.on('mouseout', function() {
d3.select(this)
.transition()
.duration(500)
.attr('r',10)
.attr('stroke-width',1)
})
.append('title') // Tooltip
.text(function (d) { return 'Actor Name: ' + d['Actor_ Name'] +
'\nTrust words: ' + d['Trust words'] +
'\nSurprise words: ' + d['Surprise words']+
'\nSadness words: ' + d['Sadness words'] +
'\nPositive words: ' + d['Positive words'] +
'\nNegative words: ' + d['Negative words'] +
'\nFear words: ' + d['Fear words'] +
'\nDisgust words: ' + d['Disgust words'] +
'\nAnticipation words: ' + d['Anticipation words'] +
'\nAnger words: ' + d['Anger words'] +
'\nAverage ranking: '+ d['Average_movie_rating']})
// X-axis
svg.append('g')
.attr('class','axis')
.attr('id','xAxis')
.attr('transform', 'translate(0,' + h + ')')
.call(xAxis)
.append('text') // X-axis Label
.attr('id','xAxisLabel')
.attr('y',-10)
.attr('x',w)
.attr('dy','.71em')
.style('text-anchor','end')
.text('Trust words')
// Y-axis
svg.append('g')
.attr('class','axis')
.attr('id','yAxis')
.call(yAxis)
.append('text') // y-axis Label
.attr('id', 'yAxisLabel')
.attr('transform','rotate(-90)')
.attr('x',0)
.attr('y',5)
.attr('dy','.71em')
.style('text-anchor','end')
.text('Trust words')
svg.append('g')
.attr("class", "grid")
.attr("transform", "translate(0," + h + ")")
.call(make_x_axis()
.tickSize(-h, 0, 0)
.tickFormat("")
)
svg.append('g')
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-w, 0, 0)
.tickFormat("")
)
function yChange() {
var value = this.value // get the new y value
yScale // change the yScale
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d[value]) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d[value]) })])
])
yAxis.scale(yScale) // change the yScale
d3.select('#yAxis') // redraw the yAxis
.transition().duration(1000)
.call(yAxis)
d3.select('#yAxisLabel') // change the yAxisLabel
.text(value)
d3.selectAll('circle') // move the circles
.transition().duration(1000)
.delay(function (d,i) { return i*100})
.attr('cy',function (d) { return yScale(d[value]) })
}
function xChange() {
var value = this.value // get the new x value
xScale // change the xScale
.domain([
d3.min([0,d3.min(data,function (d) { return parseFloat(d[value]) })]),
d3.max([0,d3.max(data,function (d) { return parseFloat(d[value]) })])
])
xAxis.scale(xScale) // change the xScale
d3.select('#xAxis') // redraw the xAxis
.transition().duration(1000)
.call(xAxis)
d3.select('#xAxisLabel') // change the xAxisLabel
.transition().duration(1000)
.text(value)
d3.selectAll('circle') // move the circles
.transition().duration(1000)
.delay(function (d,i) { return i*100})
.attr('cx',function (d) { return xScale(d[value]) })
}
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", w + 25)
.attr("y", 490)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
// draw legend text
legend.append("text")
.attr("x", w - 24)
.attr("y", 500)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d;})
.text(function(d) { return d;})
})
感谢
不要在这里倾销大量代码，请使用网格线和非常简单的数据创建一个[MCVE] **，我们可以告诉您如何更新它们。 –