个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 flexbox 来呈现过滤器和 D3 图表。我已进行所有更改以使 D3 图表响应。目前作为过滤器，我正在使用下拉菜单。我想要实现的是有一个列表而不是下拉列表。在任何选择中，D3图表的数据都会发生变化。
我想我必须在这里进行更改:
var dropdown = d3.select("#vis-container")
.insert("select", "svg")
.on("change", dropdownChange);
查看下面的完整代码段:
var nutritionFields = ["calories", "protein", "fat", "sodium", "fiber",
"carbs", "sugars", "potassium", "vitamins"];
var data = [
{
"cereal": "100%_Bran",
"manufacturer": "Nabisco",
"type": "C",
"calories": 70,
"protein": 4,
"fat": 1,
"sodium": 130,
"fiber": 10,
"carbs": 5,
"sugars": 6,
"shelf": 3,
"potassium": 280,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.33
},
{
"cereal": "100%_Natural_Bran",
"manufacturer": "Quaker Oats",
"type": "C",
"calories": 120,
"protein": 3,
"fat": 5,
"sodium": 15,
"fiber": 2,
"carbs": 8,
"sugars": 8,
"shelf": 3,
"potassium": 135,
"vitamins": 0,
"serving size weight": 1,
"cups per serving": -1
},
{
"cereal": "All-Bran",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 70,
"protein": 4,
"fat": 1,
"sodium": 260,
"fiber": 9,
"carbs": 7,
"sugars": 5,
"shelf": 3,
"potassium": 320,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.33
},
{
"cereal": "All-Bran_with_Extra_Fiber",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 50,
"protein": 4,
"fat": 0,
"sodium": 140,
"fiber": 14,
"carbs": 8,
"sugars": 0,
"shelf": 3,
"potassium": 330,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.5
},
{
"cereal": "Almond_Delight",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 2,
"sodium": 200,
"fiber": 1,
"carbs": 14,
"sugars": 8,
"shelf": 3,
"potassium": -1,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Apple_Cinnamon_Cheerios",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 2,
"sodium": 180,
"fiber": 1.5,
"carbs": 10.5,
"sugars": 10,
"shelf": 1,
"potassium": 70,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Apple_Jacks",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 0,
"sodium": 125,
"fiber": 1,
"carbs": 11,
"sugars": 14,
"shelf": 2,
"potassium": 30,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Basic_4",
"manufacturer": "General Mills",
"type": "C",
"calories": 130,
"protein": 3,
"fat": 2,
"sodium": 210,
"fiber": 2,
"carbs": 18,
"sugars": 8,
"shelf": 3,
"potassium": 100,
"vitamins": 25,
"serving size weight": 1.33,
"cups per serving": 0.75
},
{
"cereal": "Bran_Chex",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 90,
"protein": 2,
"fat": 1,
"sodium": 200,
"fiber": 4,
"carbs": 15,
"sugars": 6,
"shelf": 1,
"potassium": 125,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.67
},
{
"cereal": "Bran_Flakes",
"manufacturer": "Post",
"type": "C",
"calories": 90,
"protein": 3,
"fat": 0,
"sodium": 210,
"fiber": 5,
"carbs": 13,
"sugars": 5,
"shelf": 3,
"potassium": 190,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.67
},
{
"cereal": "Cap'n'Crunch",
"manufacturer": "Quaker Oats",
"type": "C",
"calories": 120,
"protein": 1,
"fat": 2,
"sodium": 220,
"fiber": 0,
"carbs": 12,
"sugars": 12,
"shelf": 2,
"potassium": 35,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Cheerios",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 6,
"fat": 2,
"sodium": 290,
"fiber": 2,
"carbs": 17,
"sugars": 1,
"shelf": 1,
"potassium": 105,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1.25
},
{
"cereal": "Cinnamon_Toast_Crunch",
"manufacturer": "General Mills",
"type": "C",
"calories": 120,
"protein": 1,
"fat": 3,
"sodium": 210,
"fiber": 0,
"carbs": 13,
"sugars": 9,
"shelf": 2,
"potassium": 45,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Clusters",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 3,
"fat": 2,
"sodium": 140,
"fiber": 2,
"carbs": 13,
"sugars": 7,
"shelf": 3,
"potassium": 105,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.5
},
{
"cereal": "Cocoa_Puffs",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 180,
"fiber": 0,
"carbs": 12,
"sugars": 13,
"shelf": 2,
"potassium": 55,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Corn_Chex",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 0,
"sodium": 280,
"fiber": 0,
"carbs": 22,
"sugars": 3,
"shelf": 1,
"potassium": 25,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Corn_Flakes",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 0,
"sodium": 290,
"fiber": 1,
"carbs": 21,
"sugars": 2,
"shelf": 1,
"potassium": 35,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Corn_Pops",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 0,
"sodium": 90,
"fiber": 1,
"carbs": 13,
"sugars": 12,
"shelf": 2,
"potassium": 20,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Count_Chocula",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 180,
"fiber": 0,
"carbs": 12,
"sugars": 13,
"shelf": 2,
"potassium": 65,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Cracklin'_Oat_Bran",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 3,
"fat": 3,
"sodium": 140,
"fiber": 4,
"carbs": 10,
"sugars": 7,
"shelf": 3,
"potassium": 160,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.5
},
{
"cereal": "Cream_of_Wheat_(Quick)",
"manufacturer": "Nabisco",
"type": "H",
"calories": 100,
"protein": 3,
"fat": 0,
"sodium": 80,
"fiber": 1,
"carbs": 21,
"sugars": 0,
"shelf": 2,
"potassium": -1,
"vitamins": 0,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Crispix",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 0,
"sodium": 220,
"fiber": 1,
"carbs": 21,
"sugars": 3,
"shelf": 3,
"potassium": 30,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Crispy_Wheat_&_Raisins",
"manufacturer": "General Mills",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 1,
"sodium": 140,
"fiber": 2,
"carbs": 11,
"sugars": 10,
"shelf": 3,
"potassium": 120,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Double_Chex",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 0,
"sodium": 190,
"fiber": 1,
"carbs": 18,
"sugars": 5,
"shelf": 3,
"potassium": 80,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Froot_Loops",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 1,
"sodium": 125,
"fiber": 1,
"carbs": 11,
"sugars": 13,
"shelf": 2,
"potassium": 30,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Frosted_Flakes",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 0,
"sodium": 200,
"fiber": 1,
"carbs": 14,
"sugars": 11,
"shelf": 1,
"potassium": 25,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Frosted_Mini-Wheats",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 100,
"protein": 3,
"fat": 0,
"sodium": 0,
"fiber": 3,
"carbs": 14,
"sugars": 7,
"shelf": 2,
"potassium": 100,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.8
},
{
"cereal": "Fruitful_Bran",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 120,
"protein": 3,
"fat": 0,
"sodium": 240,
"fiber": 5,
"carbs": 14,
"sugars": 12,
"shelf": 3,
"potassium": 190,
"vitamins": 25,
"serving size weight": 1.33,
"cups per serving": 0.67
},
{
"cereal": "Fruity_Pebbles",
"manufacturer": "Post",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 135,
"fiber": 0,
"carbs": 13,
"sugars": 12,
"shelf": 2,
"potassium": 25,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Golden_Crisp",
"manufacturer": "Post",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 0,
"sodium": 45,
"fiber": 0,
"carbs": 11,
"sugars": 15,
"shelf": 1,
"potassium": 40,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.88
},
{
"cereal": "Golden_Grahams",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 280,
"fiber": 0,
"carbs": 15,
"sugars": 9,
"shelf": 2,
"potassium": 45,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Grape_Nuts_Flakes",
"manufacturer": "Post",
"type": "C",
"calories": 100,
"protein": 3,
"fat": 1,
"sodium": 140,
"fiber": 3,
"carbs": 15,
"sugars": 5,
"shelf": 3,
"potassium": 85,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.88
},
{
"cereal": "Grape-Nuts",
"manufacturer": "Post",
"type": "C",
"calories": 110,
"protein": 3,
"fat": 0,
"sodium": 170,
"fiber": 3,
"carbs": 17,
"sugars": 3,
"shelf": 3,
"potassium": 90,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.25
},
{
"cereal": "Great_Grains_Pecan",
"manufacturer": "Post",
"type": "C",
"calories": 120,
"protein": 3,
"fat": 3,
"sodium": 75,
"fiber": 3,
"carbs": 13,
"sugars": 4,
"shelf": 3,
"potassium": 100,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.33
},
{
"cereal": "Wheaties_Honey_Gold",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 1,
"sodium": 200,
"fiber": 1,
"carbs": 16,
"sugars": 8,
"shelf": 1,
"potassium": 60,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
}
];
var cerealMap = {};
data.forEach(function(d) {
var cereal = d.cereal;
cerealMap[cereal] = [];
// { cerealName: [ bar1Val, bar2Val, ... ] }
nutritionFields.forEach(function(field) {
cerealMap[cereal].push( +d[field] );
});
});
var makeVis = function(cerealMap) {
// Define dimensions of vis
var margin = { top: 30, right: 50, bottom: 30, left: 50 },
width = 550 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
// Make x scale
var xScale = d3.scale.ordinal()
.domain(nutritionFields)
.rangeRoundBands([0, width], 0.1);
// Make y scale, the domain will be defined on bar update
var yScale = d3.scale.linear()
.range([height, 0]);
// Create canvas
var canvas = d3.select("#dropdown")
.append("svg")
.attr("width","100%")
.attr("height","100%")
.attr("viewBox","0 0 "+
(width+margin.left+margin.right)+
" "+
(height+margin.top+margin.bottom) )
.append("g")
.attr("transform","translate("+
margin.left+","+margin.top+")");
// Make x-axis and add to canvas
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
canvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Make y-axis and add to canvas
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var yAxisHandleForUpdate = canvas.append("g")
.attr("class", "y axis")
.call(yAxis);
yAxisHandleForUpdate.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
var updateBars = function(data) {
// First update the y-axis domain to match data
yScale.domain( d3.extent(data) );
yAxisHandleForUpdate.call(yAxis);
var bars = canvas.selectAll(".bar").data(data);
// Add bars for new data
bars.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d,i) { return xScale( nutritionFields[i] ); })
.attr("width", xScale.rangeBand())
.attr("y", function(d,i) { return yScale(d); })
.attr("height", function(d,i) { return height - yScale(d); });
// Update old ones, already have x / width from before
bars
.transition().duration(250)
.attr("y", function(d,i) { return yScale(d); })
.attr("height", function(d,i) { return height - yScale(d); });
// Remove old ones
bars.exit().remove();
};
// Handler for dropdown value change
var dropdownChange = function() {
var newCereal = d3.select(this).property('value'),
newData = cerealMap[newCereal];
updateBars(newData);
};
// Get names of cereals, for dropdown
var cereals = Object.keys(cerealMap).sort();
var dropdown = d3.select("#vis-container")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(cereals)
.enter().append("option")
.attr("value", function (d) { return d; })
.text(function (d) {
return d[0].toUpperCase() + d.slice(1,d.length); // capitalize 1st letter
});
var initialData = cerealMap[ cereals[0] ];
updateBars(initialData);
};
makeVis(cerealMap);.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item1 {
background: #f1f1f1;
width: 33%;
height: auto;
margin-top: 10px;
font-weight: bold;
text-align: center;
}
.flex-item2 {
width: 67%;
height: auto;
margin-top: 10px;
font-weight: bold;
text-align: center;
}
body {
font: 10px sans-serif;
}
select {
display: block;
}
.bar {
fill: purple;
opacity: 0.8;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1"><div id='vis-container'></div></li>
<li class="flex-item2" id="dropdown"></li>
</ul>最佳答案
如果您想使用列表而不是下拉列表，可以很容易地在相关代码中替换:
通过将 select 换成 ul 并将 option 换成 li 来创建列表而不是选择元素:
var dropdown = d3.select("#vis-container")
.insert("ul", "svg")
.classed('selector', true);
dropdown.selectAll("li")
.data(cereals)
.enter().append("li")
.attr("id", function (d) { return d.cereal; })
.text(function (d) {
return d[0].toUpperCase() + d.replace(/_/g, ' ').slice(1,d.length); // capitalize 1st letter
})
.on("click", dropdownChange); // add click event listener to each list element
事件处理函数将自动获取附加到每个元素的数据，因此只需稍微更改 dropdownChange 函数即可:
var dropdownChange = function(d) {
var newData = cerealMap[d];
updateBars(newData);
};
完整示例:
var nutritionFields = ["calories", "protein", "fat", "sodium", "fiber",
"carbs", "sugars", "potassium", "vitamins"];
var data = [
{
"cereal": "100%_Bran",
"manufacturer": "Nabisco",
"type": "C",
"calories": 70,
"protein": 4,
"fat": 1,
"sodium": 130,
"fiber": 10,
"carbs": 5,
"sugars": 6,
"shelf": 3,
"potassium": 280,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.33
},
{
"cereal": "100%_Natural_Bran",
"manufacturer": "Quaker Oats",
"type": "C",
"calories": 120,
"protein": 3,
"fat": 5,
"sodium": 15,
"fiber": 2,
"carbs": 8,
"sugars": 8,
"shelf": 3,
"potassium": 135,
"vitamins": 0,
"serving size weight": 1,
"cups per serving": -1
},
{
"cereal": "All-Bran",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 70,
"protein": 4,
"fat": 1,
"sodium": 260,
"fiber": 9,
"carbs": 7,
"sugars": 5,
"shelf": 3,
"potassium": 320,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.33
},
{
"cereal": "All-Bran_with_Extra_Fiber",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 50,
"protein": 4,
"fat": 0,
"sodium": 140,
"fiber": 14,
"carbs": 8,
"sugars": 0,
"shelf": 3,
"potassium": 330,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.5
},
{
"cereal": "Almond_Delight",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 2,
"sodium": 200,
"fiber": 1,
"carbs": 14,
"sugars": 8,
"shelf": 3,
"potassium": -1,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Apple_Cinnamon_Cheerios",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 2,
"sodium": 180,
"fiber": 1.5,
"carbs": 10.5,
"sugars": 10,
"shelf": 1,
"potassium": 70,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Apple_Jacks",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 0,
"sodium": 125,
"fiber": 1,
"carbs": 11,
"sugars": 14,
"shelf": 2,
"potassium": 30,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Basic_4",
"manufacturer": "General Mills",
"type": "C",
"calories": 130,
"protein": 3,
"fat": 2,
"sodium": 210,
"fiber": 2,
"carbs": 18,
"sugars": 8,
"shelf": 3,
"potassium": 100,
"vitamins": 25,
"serving size weight": 1.33,
"cups per serving": 0.75
},
{
"cereal": "Bran_Chex",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 90,
"protein": 2,
"fat": 1,
"sodium": 200,
"fiber": 4,
"carbs": 15,
"sugars": 6,
"shelf": 1,
"potassium": 125,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.67
},
{
"cereal": "Bran_Flakes",
"manufacturer": "Post",
"type": "C",
"calories": 90,
"protein": 3,
"fat": 0,
"sodium": 210,
"fiber": 5,
"carbs": 13,
"sugars": 5,
"shelf": 3,
"potassium": 190,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.67
},
{
"cereal": "Cap'n'Crunch",
"manufacturer": "Quaker Oats",
"type": "C",
"calories": 120,
"protein": 1,
"fat": 2,
"sodium": 220,
"fiber": 0,
"carbs": 12,
"sugars": 12,
"shelf": 2,
"potassium": 35,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Cheerios",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 6,
"fat": 2,
"sodium": 290,
"fiber": 2,
"carbs": 17,
"sugars": 1,
"shelf": 1,
"potassium": 105,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1.25
},
{
"cereal": "Cinnamon_Toast_Crunch",
"manufacturer": "General Mills",
"type": "C",
"calories": 120,
"protein": 1,
"fat": 3,
"sodium": 210,
"fiber": 0,
"carbs": 13,
"sugars": 9,
"shelf": 2,
"potassium": 45,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Clusters",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 3,
"fat": 2,
"sodium": 140,
"fiber": 2,
"carbs": 13,
"sugars": 7,
"shelf": 3,
"potassium": 105,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.5
},
{
"cereal": "Cocoa_Puffs",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 180,
"fiber": 0,
"carbs": 12,
"sugars": 13,
"shelf": 2,
"potassium": 55,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Corn_Chex",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 0,
"sodium": 280,
"fiber": 0,
"carbs": 22,
"sugars": 3,
"shelf": 1,
"potassium": 25,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Corn_Flakes",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 0,
"sodium": 290,
"fiber": 1,
"carbs": 21,
"sugars": 2,
"shelf": 1,
"potassium": 35,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Corn_Pops",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 0,
"sodium": 90,
"fiber": 1,
"carbs": 13,
"sugars": 12,
"shelf": 2,
"potassium": 20,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Count_Chocula",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 180,
"fiber": 0,
"carbs": 12,
"sugars": 13,
"shelf": 2,
"potassium": 65,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Cracklin'_Oat_Bran",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 3,
"fat": 3,
"sodium": 140,
"fiber": 4,
"carbs": 10,
"sugars": 7,
"shelf": 3,
"potassium": 160,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.5
},
{
"cereal": "Cream_of_Wheat_(Quick)",
"manufacturer": "Nabisco",
"type": "H",
"calories": 100,
"protein": 3,
"fat": 0,
"sodium": 80,
"fiber": 1,
"carbs": 21,
"sugars": 0,
"shelf": 2,
"potassium": -1,
"vitamins": 0,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Crispix",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 0,
"sodium": 220,
"fiber": 1,
"carbs": 21,
"sugars": 3,
"shelf": 3,
"potassium": 30,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Crispy_Wheat_&_Raisins",
"manufacturer": "General Mills",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 1,
"sodium": 140,
"fiber": 2,
"carbs": 11,
"sugars": 10,
"shelf": 3,
"potassium": 120,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Double_Chex",
"manufacturer": "Ralston Purina",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 0,
"sodium": 190,
"fiber": 1,
"carbs": 18,
"sugars": 5,
"shelf": 3,
"potassium": 80,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Froot_Loops",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 1,
"sodium": 125,
"fiber": 1,
"carbs": 11,
"sugars": 13,
"shelf": 2,
"potassium": 30,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 1
},
{
"cereal": "Frosted_Flakes",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 0,
"sodium": 200,
"fiber": 1,
"carbs": 14,
"sugars": 11,
"shelf": 1,
"potassium": 25,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Frosted_Mini-Wheats",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 100,
"protein": 3,
"fat": 0,
"sodium": 0,
"fiber": 3,
"carbs": 14,
"sugars": 7,
"shelf": 2,
"potassium": 100,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.8
},
{
"cereal": "Fruitful_Bran",
"manufacturer": "Kelloggs",
"type": "C",
"calories": 120,
"protein": 3,
"fat": 0,
"sodium": 240,
"fiber": 5,
"carbs": 14,
"sugars": 12,
"shelf": 3,
"potassium": 190,
"vitamins": 25,
"serving size weight": 1.33,
"cups per serving": 0.67
},
{
"cereal": "Fruity_Pebbles",
"manufacturer": "Post",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 135,
"fiber": 0,
"carbs": 13,
"sugars": 12,
"shelf": 2,
"potassium": 25,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Golden_Crisp",
"manufacturer": "Post",
"type": "C",
"calories": 100,
"protein": 2,
"fat": 0,
"sodium": 45,
"fiber": 0,
"carbs": 11,
"sugars": 15,
"shelf": 1,
"potassium": 40,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.88
},
{
"cereal": "Golden_Grahams",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 1,
"fat": 1,
"sodium": 280,
"fiber": 0,
"carbs": 15,
"sugars": 9,
"shelf": 2,
"potassium": 45,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
},
{
"cereal": "Grape_Nuts_Flakes",
"manufacturer": "Post",
"type": "C",
"calories": 100,
"protein": 3,
"fat": 1,
"sodium": 140,
"fiber": 3,
"carbs": 15,
"sugars": 5,
"shelf": 3,
"potassium": 85,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.88
},
{
"cereal": "Grape-Nuts",
"manufacturer": "Post",
"type": "C",
"calories": 110,
"protein": 3,
"fat": 0,
"sodium": 170,
"fiber": 3,
"carbs": 17,
"sugars": 3,
"shelf": 3,
"potassium": 90,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.25
},
{
"cereal": "Great_Grains_Pecan",
"manufacturer": "Post",
"type": "C",
"calories": 120,
"protein": 3,
"fat": 3,
"sodium": 75,
"fiber": 3,
"carbs": 13,
"sugars": 4,
"shelf": 3,
"potassium": 100,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.33
},
{
"cereal": "Wheaties_Honey_Gold",
"manufacturer": "General Mills",
"type": "C",
"calories": 110,
"protein": 2,
"fat": 1,
"sodium": 200,
"fiber": 1,
"carbs": 16,
"sugars": 8,
"shelf": 1,
"potassium": 60,
"vitamins": 25,
"serving size weight": 1,
"cups per serving": 0.75
}
];
var cerealMap = {};
data.forEach(function(d) {
var cereal = d.cereal;
cerealMap[cereal] = [];
// { cerealName: [ bar1Val, bar2Val, ... ] }
nutritionFields.forEach(function(field) {
cerealMap[cereal].push( +d[field] );
});
});
var makeVis = function(cerealMap) {
// Define dimensions of vis
var margin = { top: 30, right: 50, bottom: 30, left: 50 },
width = 550 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
// Make x scale
var xScale = d3.scale.ordinal()
.domain(nutritionFields)
.rangeRoundBands([0, width], 0.1);
// Make y scale, the domain will be defined on bar update
var yScale = d3.scale.linear()
.range([height, 0]);
// Create canvas
var canvas = d3.select("#dropdown")
.append("svg")
.attr("width","100%")
.attr("height","100%")
.attr("viewBox","0 0 "+
(width+margin.left+margin.right)+
" "+
(height+margin.top+margin.bottom) )
.append("g")
.attr("transform","translate("+
margin.left+","+margin.top+")");
// Make x-axis and add to canvas
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
canvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Make y-axis and add to canvas
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var yAxisHandleForUpdate = canvas.append("g")
.attr("class", "y axis")
.call(yAxis);
yAxisHandleForUpdate.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
var updateBars = function(data) {
// First update the y-axis domain to match data
yScale.domain( d3.extent(data) );
yAxisHandleForUpdate.call(yAxis);
var bars = canvas.selectAll(".bar").data(data);
// Add bars for new data
bars.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d,i) { return xScale( nutritionFields[i] ); })
.attr("width", xScale.rangeBand())
.attr("y", function(d,i) { return yScale(d); })
.attr("height", function(d,i) { return height - yScale(d); });
// Update old ones, already have x / width from before
bars
.transition().duration(250)
.attr("y", function(d,i) { return yScale(d); })
.attr("height", function(d,i) { return height - yScale(d); });
// Remove old ones
bars.exit().remove();
};
// Handler for dropdown value change
var dropdownChange = function(d) {
var newData = cerealMap[d];
updateBars(newData);
};
// Get names of cereals, for dropdown
var cereals = Object.keys(cerealMap).sort();
var dropdown = d3.select("#vis-container")
.insert("ul", "svg")
.classed('selector', true);
dropdown.selectAll("li")
.data(cereals)
.enter().append("li")
.attr("id", function (d) { return d.cereal; })
.text(function (d) {
return d[0].toUpperCase() + d.replace(/_/g, ' ').slice(1,d.length); // capitalize 1st letter
})
.on("click", dropdownChange);
var initialData = cerealMap[ cereals[0] ];
updateBars(initialData);
};
makeVis(cerealMap);.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item1 {
background: #f1f1f1;
width: 33%;
height: auto;
margin-top: 10px;
font-weight: bold;
text-align: center;
}
.flex-item2 {
width: 67%;
height: auto;
margin-top: 10px;
font-weight: bold;
text-align: center;
}
body {
font: 10px sans-serif;
}
select {
display: block;
}
.bar {
fill: purple;
opacity: 0.8;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
ul.selector {
text-align: left;
}
.selector li {
cursor: pointer;
}
.selector li:hover, .selector li:focus, .selector li:active {
color: red;
}<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1"><div id='vis-container'></div></li>
<li class="flex-item2" id="dropdown"></li>
</ul>关于javascript - 过滤列表而不是 D3 中的选择下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52589564/
25
4
0
场景 网站页面有一个带有分页、过滤、排序功能的表格 View 。 表中的数据是从REST API服务器获取的，数据包含数百万条记录。 数据库 REST API 服务器 Web 服务器 浏览器 问
我有一个表student，其中的列dte_date(日期)具有值(2019-01-01、2019-02-01、2019-03-01)。 .等) 条件: dte_date 列中没有重复值。 但 dte_
我有一些逻辑可以根据不活动的用户创建通知。我正在获取具有以下属性的用户列表。我想做的只是在部门有非 Activity 用户时触发我的创建通知方法。因此，给出下面的列表，基本上会创建 1 个通知，表示部
使用 GPS 开发跟踪应用程序。一切都很好，但有时由于封闭区域或恶劣天气，我得到的分数不准确。当您绘制它们时，它看起来不对，有很多跃点/跳跃。 我应该运行什么算法来过滤掉不良信号对我来说，这看起来像是
我正在尝试按变量类型过滤对象数组。节点是一个具有位置的对象，但以不同的方式定义——作为点、矢量或附件。这是一个代码: class Joint { var position:Position
我想做的是在向量上创建一个过滤器，以便它删除未通过谓词测试的元素；但不太确定我该怎么做。 我根据谓词评估输入向量中的每个元素，例如在我的代码中，is_even 仿函数在 device_vector 向
我是 Gremlin 的新手，我正在使用 Gremlin 3.0.2 和 Stardog 5.0。我编写此查询是为了找出 schema.org 本体中两个实体之间的路径。以下是输出 - gremlin
考虑以下示例数据表， dt 30 的那一行需要去 - 或者如果其中两行 > 30相隔几秒钟，删除所有 3 个。然而 ，当我们有 4 行或更多行时，我们需要删除时间差 > 30 没有另一对 < 30
我正在考虑使用 ZeroMQ，并尝试了一些示例。但是，我无法验证 ZeroMQ 是否支持一些重要的要求。我希望你能帮助我。 我将使用这个简单的场景来问我的问题: 出版商(例如交易所)提供(大量)股票的
我需要从我的查询中过滤掉大量的对象。目前，它正在抓取类中的所有对象，我想将其过滤为查询字符串中的相关对象。我怎样才能做到这一点？当我尝试时，我收到一个属性错误说明 ''QuerySet' object
如何在 Prometheus 查询中添加标签过滤器？ kube_pod_info kube_pod_info{created_by_kind="ReplicaSet",created_by_name=
我有包含字符串的列的数据框，并希望过滤掉包含某些字符串以外的任何内容的所有行。考虑下面的简化示例: string % dplyr::filter(stringr::str_detect(string,
我有以下数据框，其中包含多行的角度变化值: 'data.frame': 712801 obs. of 4 variables: $ time_passed: int 1 2 3 4 5 6
我有一个 BehaviorSubject我希望能够filter ，但要保持新订阅者在订阅时始终获得一个值的行为主题式质量，即使最后发出的值被过滤掉。有没有一种简洁的方法可以使用 rxjs 的内置函数来
我有一个 RSS 提要，每天输出大约 100 篇文章。我希望过滤它以仅包含更受欢迎的链接，也许将其过滤到 50 个或更少。回到当天，我相信您可以使用“postrank”来做到这一点，但在谷歌收购后现已
我有这样一个重复的xml树- this is a sample xml file yellowred blue greyredblue 如您所见，每个项目可以具有不同数量的颜色标签
我以为我在 Haskell 学习中一帆风顺，直到... 我有一个 [[Int]] tiles = [[1,0,0] ,[0,1,0] ,[0,1,0]
我在使用 Knockout.js 过滤可观察数组时遇到问题 我的js: 包含数据的数组 var docListData = [ { name: "Article Name 1", info:
我在 mongoDB 中有这个架构: var CostSchema = new Schema({ item: String, value: Number }); var Attachm
给定一个数据框“foo”，我如何才能只选择“foo”中的那些行，例如foo$location =“那里”？ foo = data.frame(location = c("here", "there",
我是一名优秀的程序员,十分优秀！