gpt4 book ai didi

angularjs - 数据传入时更新 D3 直方图

转载 作者:行者123 更新时间:2023-12-02 03:23:31 24 4
gpt4 key购买 nike

SO 社区,

我正在制作一个 D3 直方图作为 Angular 指令,我希望它能够随着它读取的数据发生变化而相应地改变/更新。换句话说,我正在使用 Angular 来观察数据的变化,并(希望)在每次数据发生变化时重新绘制直方图。

这可能主要是关于 D3 的数据更新和绑定(bind)的问题,因为 $watchCollection 似乎工作正常。即使我经历了this tutorial在向 d3 图表添加元素时,我仍然无法将其应用到我的直方图上。我认为直方图中元素的嵌套方式让我很困惑...

上下文:理想情况下,此直方图将从一个数组中读取,从多个 Ajax 调用返回的数据将存储在该数组中。因此,每次新数据集到达时,直方图都会自行增长另一个条形图。这就是为什么我很想知道如何正确更新图表和 x 轴的原因。

谢谢! :)

JS fiddle 在这里:http://jsfiddle.net/santina/wrtenjny/1/

此处仅提供 d3 部分的代码,主要取自 mbostock 的可排序条形图。

        // Aesthetic settings 
var margin = {top: 20, right: 50, bottom: 20, left: 50},
width = document.getElementById('performance').clientWidth - margin.left - margin.right ||
940 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
barColor = "steelblue",
axisColor = "whitesmoke",
axisLabelColor = "grey",
yText = "# QUERIES",
xText = "BEACON IDs";

// Inputs to the d3 graph
var data = scope[attrs.data];

// A formatter for counts.
var formatCount = d3.format(",.0f");

// Set the scale, separate the first bar by a bar width from y-axis
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 1);

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")
.tickFormat(formatCount);

// Initialize histogram
var svg = d3.select(".histogram-chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function drawAxis(){


data.forEach(function(d) {
d.nqueries = +d.nqueries;
});

x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.nqueries; })]);

// Draw x-axis
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", 6)
.attr("dy", "-0.71em")
.attr("x", width )
.style("text-anchor", "end")
.style("fill", axisLabelColor)
.text(xText);

// Draw y-axis
svg.append("g")
.attr("class", "y-axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("fill", axisLabelColor)
.text(yText);

// Change axis color
d3.selectAll("path").attr("fill", axisColor);
}

function updateAxis(){
console.log(data);
data.forEach(function(d) {
d.nqueries = +d.nqueries;
});

x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.nqueries; })]);

svg.selectAll("g.y_axis").call(yAxis);
svg.selectAll("g.x_axis").call(xAxis);

}


function drawHistogram(){

drawAxis();

var bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "barInfo");

bar.append("rect")
.attr("class", "bar")
.attr("x", function(d){ return x(d.name) })
.attr("width", x.rangeBand())
.attr("y", function(d){ return y(d.nqueries) })
.attr("height", function(d) { return height - y(d.nqueries); })
.attr("fill", barColor);

bar.append("text")
.attr("y", function(d){ return y(d.nqueries) })
.attr("x", function(d){ return x(d.name) })
.attr("dy", "-1px")
.attr("dx", x.rangeBand()/2 )
.attr("text-anchor", "middle")
.attr("class", "numberLabel")
.text(function(d) { return formatCount(d.nqueries); });
}

// Doesn't work :(
function updateHistogram(){
console.log("updating");

// Redefine scale and update axis
updateAxis();

// Select
var bar = svg.selectAll(".barInfo").data(data);

// Update - rect
var rects = bar.selectAll("rect")
.attr("class", "bar")
.attr("x", function(d){ return x(d.name) })
.attr("width", x.rangeBand());

// Update
var texts = bar.selectAll("text")
.attr("x", function(d){ return x(d.name) })
.attr("dx", x.rangeBand()/2 );

// Enter
bar.enter().append("g")
.attr("class", "bar").selectAll("rect").append("rect")
.attr("class", "bar")
.attr("x", function(d){ return x(d.name) })
.attr("width", x.rangeBand())
.attr("y", function(d){ return y(d.nqueries) })
.attr("height", function(d) { return height - y(d.nqueries); })
.attr("fill", barColor);

bar.enter().append("g")
.attr("class", "bar").selectAll("text").append("text")
.attr("y", function(d){ return y(d.nqueries) })
.attr("x", function(d){ return x(d.name) })
.attr("dy", "-1px")
.attr("dx", x.rangeBand()/2 )
.attr("text-anchor", "middle")
.attr("class", "numberLabel")
.text(function(d) { return formatCount(d.nqueries); });

}

drawHistogram();

最佳答案

首先,您在更新轴时得到了错误的 class 选择器:

svg.selectAll("g.y-axis").call(yAxis); //<-- dash not underscore
svg.selectAll("g.x-axis").call(xAxis);

其次,您的更新已接近尾声,但我们可以稍微清理一下:

// select on what you originally binded data to
var bar = svg.selectAll(".barInfo").data(data);

// for data entering
var bEnter = bar.enter().append("g")
.attr("class", "barInfo");
// append a rect
bEnter.append("rect")
.attr("class", "bar");
// and the text elements
bEnter.append("text")
.attr("class","numberLabel");

// now we can update everybody together
bar.select("rect")
.attr("x", function(d){ return x(d.name) })
.attr("width", x.rangeBand())
.attr("y", function(d){ return y(d.nqueries) })
.attr("height", function(d) { return height - y(d.nqueries); })
.attr("fill", barColor);

bar.select("text")
.attr("y", function(d){ return y(d.nqueries) })
.attr("x", function(d){ return x(d.name) })
.attr("dy", "-1px")
.attr("dx", x.rangeBand()/2 )
.attr("text-anchor", "middle")
.attr("class", "numberLabel")
.text(function(d) { return formatCount(d.nqueries); });

更新示例 here .

编辑

糟糕,我没有正确选择我的更新。

bar.selectAll("rect")

应该是:

bar.select("rect")

这修复了更新和排序...

已更新 fiddle .

另请注意,我进一步折叠了您的代码。使用 Angular watch ,您真的不需要单独的绘制和更新功能,两者都可以。

关于angularjs - 数据传入时更新 D3 直方图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31628050/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com