- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用一些过滤器制作折线图。它在第一次加载时按照我想要的方式工作,但是当我更改下拉列表选择时,事情就会崩溃。
我希望所选状态在下拉选择更改时保持选中状态。现在,如果您在“苹果”下拉列表中取消选择缅因州,然后切换到“梨”下拉列表,缅因州线会回来(尽管选择框保持灰色。)
如何维护所选行?
代码也在下面。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 12px Arial;}
path {
stroke: #ccc;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
#legendContainer{
position:absolute;
top:60px;
left:10px;
overflow: auto;
height:490px;
width:110px;
}
#legend{
width:90px;
height:200px;
}
.legend {
font-size: 12px;
font-weight: normal;
text-anchor: left;
}
.legendcheckbox{
cursor: pointer;
}
#showAll{
position:absolute;
top:600px;
left:880px;
}
#clearAll{
position:absolute;
top:600px;
left:950px;
}
input{
border-radius:5px;
padding:5px 10px;
background:#999;
border:0;
color:#fff;
}
#inds{
position:absolute;
top:10px;
left:10px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<select id="inds">
<option value="apples" selected="selected">apples</option>
<option value="pears">pears</option>
<option value="tomatoes">tomatoes</option>
</select>
<div id="legendContainer" class="legendContainer">
<svg id="legend"></svg>
</div>
<div id="showAll">
<input name="showAllButton"
type="button"
value="Show All"
onclick="showAll()" />
</div>
<div id="clearAll">
<input name="clearAllButton"
type="button"
value="Clear All"
onclick="clearAll()" />
</div>
<script>
function filterJSON(json, key, value) {
var result = [];
for (var produce in json) {
if (json[produce][key] === value) {
result.push(json[produce]);
}
}
return result;
}
// Set the dimensions of the canvas / graph
var margin = {top: 50, right: 20, bottom: 30, left: 160},
width = 1000 - margin.left - margin.right,
height = 550 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var stateline = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.value); });
// Adds the svg canvas
var svg = 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 data;
// Get the data
d3.json("data.json", function(error, json) {
console.log("json", json);
json.forEach(function(d) {
d.value = +d.value;
});
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
data = filterJSON(json, 'produce', section);
updateGraph(data);
jQuery('h1.page-header').html(section);
});
// generate initial graph
data = filterJSON(json, 'produce', 'apples');
updateGraph(data);
});
var color = d3.scale.ordinal().range(["#48A36D", "#0096ff", "#ff007e"]);
function updateGraph(data) {
data.forEach(function(d) {
d.value = +d.value;
d.year = parseDate(String(d.year));
d.active = true;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; })]);
// Nest the entries by state
dataNest = d3.nest()
.key(function(d) {return d.state;})
.entries(data);
var state = svg.selectAll("path")
.data(dataNest);
state.enter().append("path")
.attr("class", "line");
state.transition()
.style("stroke", function(d,i) { return d.color = color(d.key); })
.attr("id", function(d){ return 'tag'+d.key.replace(/\s+/g, '');}) // assign ID
.attr("d", function(d){
if (d.active = true){return stateline(d.values) }
else{ return null;}
});
state.exit().remove();
var legend = d3.select("#legend")
.selectAll("text")
.data(dataNest);
//checkboxes
legend.enter().append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("x", 0)
.attr("y", function (d, i) { return 0 +i*15; }) // spacing
.attr("fill",function(d) { if (d.active == true){ return color(d.key);} else {return "#ccc";}})
.attr("class", "legendcheckbox")
.on("click", function(d){
d.active = !d.active;
// Hide or show the lines based on the ID
d3.select("#tag"+d.key)
.transition().duration(100)
.attr("d", function(d){
if (d.active == true){return stateline(d.values);} else {return null;}
});
// fill checkbox color or not
d3.select(this).attr("fill",function(d) {
if (d.active == true){ return color(d.key);}
else {return "#ccc";}});
});
// Add the Legend text
legend.enter().append("text")
.attr("x", 15)
.attr("y", function(d,i){return 10 +i*15;})
.attr("class", "legend");
legend.transition()
.style("fill", "#777" )
.text(function(d){return d.key;});
legend.exit().remove();
svg.selectAll(".axis").remove();
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
};
function clearAll(){
d3.selectAll(".line")
.transition().duration(100)
.attr("d", function(d){
return null;
});
d3.select("#legend").selectAll("rect")
.transition().duration(100)
.attr("fill", "#ccc");
};
function showAll(){
d3.selectAll(".line")
.transition().duration(100)
.attr("d", function(d){
return stateline(d.values);
});
d3.select("#legend").selectAll("rect")
.attr("fill",function(d) {
if (d.active == true){
return color(d.key);
}
})
};
</script>
</body>
这是 data.json 文件:
[
{
"state":"Maine",
"produce":"apples",
"year":1900,
"value":"131"
},
{
"state":"Maine",
"produce":"apples",
"year":1950,
"value":"231"
},
{
"state":"Maine",
"produce":"apples",
"year":2000,
"value":"191"
},
{
"state":"Maine",
"produce":"apples",
"year":2015,
"value":"302"
},
{
"state":"Pennsylvania",
"produce":"apples",
"year":1900,
"value":"31"
},
{
"state":"Pennsylvania",
"produce":"apples",
"year":1950,
"value":"331"
},
{
"state":"Pennsylvania",
"produce":"apples",
"year":2000,
"value":"291"
},
{
"state":"Pennsylvania",
"produce":"apples",
"year":2015,
"value":"250"
},
{
"state":"Ohio",
"produce":"apples",
"year":1900,
"value":"11"
},
{
"state":"Ohio",
"produce":"apples",
"year":1950,
"value":"230"
},
{
"state":"Ohio",
"produce":"apples",
"year":2000,
"value":"185"
},
{
"state":"Ohio",
"produce":"apples",
"year":2015,
"value":"310"
},
{
"state":"Maine",
"produce":"pears",
"year":1900,
"value":"171"
},
{
"state":"Maine",
"produce":"pears",
"year":1950,
"value":"121"
},
{
"state":"Maine",
"produce":"pears",
"year":2000,
"value":"231"
},
{
"state":"Maine",
"produce":"pears",
"year":2015,
"value":"202"
},
{
"state":"Pennsylvania",
"produce":"pears",
"year":1900,
"value":"73"
},
{
"state":"Pennsylvania",
"produce":"pears",
"year":1950,
"value":"151"
},
{
"state":"Pennsylvania",
"produce":"pears",
"year":2000,
"value":"399"
},
{
"state":"Pennsylvania",
"produce":"pears",
"year":2015,
"value":"140"
},
{
"state":"Ohio",
"produce":"pears",
"year":1900,
"value":"146"
},
{
"state":"Ohio",
"produce":"pears",
"year":1950,
"value":"130"
},
{
"state":"Ohio",
"produce":"pears",
"year":2000,
"value":"195"
},
{
"state":"Ohio",
"produce":"pears",
"year":2015,
"value":"210"
},
{
"state":"Maine",
"produce":"tomatoes",
"year":1900,
"value":"71"
},
{
"state":"Maine",
"produce":"tomatoes",
"year":1950,
"value":"221"
},
{
"state":"Maine",
"produce":"tomatoes",
"year":2000,
"value":"31"
},
{
"state":"Maine",
"produce":"tomatoes",
"year":2015,
"value":"102"
},
{
"state":"Pennsylvania",
"produce":"tomatoes",
"year":1900,
"value":"173"
},
{
"state":"Pennsylvania",
"produce":"tomatoes",
"year":1950,
"value":"194"
},
{
"state":"Pennsylvania",
"produce":"tomatoes",
"year":2000,
"value":"195"
},
{
"state":"Pennsylvania",
"produce":"tomatoes",
"year":2015,
"value":"230"
},
{
"state":"Ohio",
"produce":"tomatoes",
"year":1900,
"value":"216"
},
{
"state":"Ohio",
"produce":"tomatoes",
"year":1950,
"value":"184"
},
{
"state":"Ohio",
"produce":"tomatoes",
"year":2000,
"value":"125"
},
{
"state":"Ohio",
"produce":"tomatoes",
"year":2015,
"value":"150"
}
];
最佳答案
更新了工作中的 Plunker here
用于绘制线条的dataNest
始终包含数组中的三个元素:
dataNest = d3.nest() .key(function(d) {return d.state;}) .entries(数据);
来自 filterJSON
函数的 data
包括一种特定产品的 3 种状态。这就是为什么即使图例选择器已切换,图表上也会显示三行。因此,需要做的是确保用于生成路径的数据不仅与 Produce 匹配,还与 states(图例选择器)匹配,例如:
var result = dataNest.filter(function(val,idx, arr){
return $("." + val.key).attr("fill") !== "#ccc"
// matching the data with selector status
})
var state = svg.selectAll("path")
.data(result, function(d){return d.key});
同时,更新图例选择器,如下所示:
.attr("class", function(d,i){
return "legendcheckbox " + d.key
})
以便路径数据与选定的图例匹配。
通过按键功能将线条元素与数据绑定(bind),这样当你点击图例选择器时,就会找到对应的元素。例如:
var state = svg.selectAll(".line") .data(结果, function(d){return d.key});
在这里,我们通过每个键
将 DOM 元素与数据绑定(bind),特别是状态。
每次更新都有一个处理年份数据的步骤:
data.forEach(函数(d) { d.值=+d.值; d.year = parseDate(String(d.year)); d.事件=真;});
如果我们使用数据绑定(bind)方法来处理某一特定行的存在,我们应该小心,因为d.year
可能已经被处理,这将导致d.year
为 null
。至于在轴上显示标准格式,我认为更安全的方法是在 xAxis 中设置格式:
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5)
.tickFormat(d3.time.format("%Y"))
这样,你就不需要担心改变原始数据,并且可以按照你想要的方式显示时间格式。
关于javascript - 当选择新的下拉过滤器时,图表中选定的行不会保持一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34125912/
我有一个对象数组,我想在键传入“filter”过滤器时提取值。下面是我尝试过的 Controller 代码片段,但我得到的响应类型未定义。请帮我找出哪里出错了。 var states = [{"HI
如果任何 J2EE 应用程序直接访问 servlet,然后 servlet 将相同的请求转发到某个 .jsp 页面。 request.getRequestDispatcher("Login.jsp")
我有一个带有图像缩略图的表单,可以通过复选框进行选择以进行下载。我想要一个包含 jQuery 中图像的数组,用于 Ajax 调用。 2个问题: - 表格顶部有一个复选框,用于切换我想要从映射中排除的所
我必须从服务器转储数据库,将 .sql 传输到另一台服务器,然后运行以下脚本以使用此语法删除某些行: DELETE wp_posts FROM wp_posts INNER JOIN wp_postm
我想从目录中过滤掉特定类型的文件,但收到错误“ token 语法错误,删除这些 token ”: File dir = new File("c:/etc/etc"); File[] f
几乎所有的 Web 应用程序都依赖外部的输入。这些数据通常来自用户或其他应用程序(比如 web 服务)。通过使用过滤器,您能够确保应用程序获得正确的输入类型。 您应该始终对外部数据进行过滤! 输
我正在开发一个由 OData 服务提供支持的搜索功能。它将返回一个或一列标题对象作为结果。我们需要搜索的许多字段不在标题对象中。它们仅在子对象(导航属性)中。能够针对子字段执行 OData 搜索并仍然
假设我有以下模型,它有一个方法 variants(): class Example(models.Model): text = models.CharField(max_length=255)
我有一个默认的列表列表,但我基本上想这样做: myDefaultDict = filter(lambda k: len(k)>1, myDefaultDict) 除了它似乎只适用于列表。我能做什么?
我正在使用 django-filter 来输出我的模型的过滤结果。那里没有问题。下一步是添加一个分页器……尽管现在已经苦苦挣扎了好几天。 views.py: def funds_overview(re
我正在做一个概念证明,我正在试验一种奇怪的行为。 我有一个按日期字段按范围分区的表,如果我设置固定日期或由 SYSDATE 创建的日期,查询的成本会发生很大变化。 这些是解释计划: SQL> SELE
如果一个或另一个值匹配,是否可以制作一个过滤器,例如一个中性的 PropertyFilter(并传递给链中的下一个过滤器)?就像是: value1 val
我是 VBA 初学者,正在尝试根据单元格值过滤数据,经过一番谷歌搜索后,我编写了一个有效的代码 Sub FilterDepartment_Sales() Sheet6.Activate
假设我在 excel 数据透视表中有两个过滤器。 两者最初都会显示筛选列的选定范围内的所有值。 当我仅在过滤器 1 中选择几个值时,过滤器 2 仍会继续显示基础数据中所选范围内特定过滤器列中的所有值。
是否可以定义自定义 build-ins (名称不再适合)在 ftl? 由于语义前提,我不想让它成为一个函数,而是一个内置的。 最佳答案 这是不可能的,?语法是为内置函数保留的。 (顺便说一句,这意味着
我试图在 Edit | 之外添加一个链接通过插件删除wordpress管理员>用户>所有用户列表中的链接..这是我第一次尝试通过查看其他插件或搜索google来制作wordpress插件.. 我添加了
我正在尝试按照以下教程使用 django 过滤器进行分页,但该教程似乎缺少某些内容,而且我无法使用基于函数的 View 方法显示分页。 https://simpleisbetterthancomple
由于我是 Powershell 新手,因此寻求最佳实践方面的帮助, 我有一个 csv 文件,我想过滤掉 csv 中的每一行,除了包含“未安装”的行 然后,我想根据包含计算机列表的单独 csv 文件过滤
我正在尝试创建一个搜索查询,它会告诉我我作为审阅者添加到其中的打开更改,但我还没有提交最新补丁集的代码审查。这应该包括其他人已经评论过的更改,但我没有。 我能找到的最接近的是 is:reviewer
在我的 Web 应用程序中,我有 3 个主要部分 1. 客户 2. 供应商 3. 管理员 我正在使用 java session 过滤器来检查用户 session 并允许访问网站的特定部分。 因此客户只
我是一名优秀的程序员,十分优秀!