Я нашел и использовал этот хороший пример моделирования выбранных и опций. Вы можете сделать это, чтобы выбрать все, что вы хотите. Вот как Fiddle
html
css
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial, Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active, .styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
}
.options li:hover {
background-color:#39f;
color:white;
}
JS
// Iterate over each select element
$('select').each(function () {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('');
// Insert a styled div to sit over the top of the hidden select element
$this.after('');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('
', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function (e) {
e.stopPropagation();
$('div.styledSelect.active').each(function () {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function () {
$styledSelect.removeClass('active');
$list.hide();
});
});
Функции d3.min()
и d3.max()
работают с массивами, а не с объектами. Похоже, вы пытаетесь решить эту проблему, заключая объект data
в массив (например, d3.max([data])
), но все, что на самом деле делает, говорит: «Дайте мне максимальное значение массива с одним значением (объект данных). " Поскольку в массиве есть только одно значение, это значение возвращается.
Если вы просто хотите получить максимальное / минимальное значение в объекте, вы можете использовать функцию d3.values()
, чтобы извлечь все значения в данных в виде массива, а затем взять максимальное значение в этом массиве:
var max = d3.max(d3.values(data));
// 32710
Если вы также хотите знать ключ, вам может потребоваться использовать d3.entries()
для создания массива { key, value }
объектов, затем отсортировать их и взять верх:
// create an array of key, value objects
var max = d3.entries(data)
// sort by value descending
.sort(function(a, b) { return d3.descending(a.value, b.value); })
// take the first option
[0];
// { key: "01", value: 32710 }
Если ваши данные являются массивом, ваш исходный код будет работать, если вы избавитесь от скобок вокруг данных:
var data = [32710,20280,18002];
console.log(data);
console.log(d3.min(data));
console.log(d3.max(data));
Если вам нужно идентифицировать значения массива с помощью ключей «01», «02», «03», создайте массив объектов и оперируйте значениями, чтобы получить min / max:
//data as key/value pairs
var data = [
{key: "01", value: 32710},
{key: "02", value: 20280},
{key: "03", value: 18002}
];
console.log(data);
console.log(d3.min(data, function(d) { return d.value; }));
console.log(d3.max(data, function(d) { return d.value; }));
// AND IF YOU WANT THE min/max of the KEYS:
console.log(d3.min(data, function(d) { return d.key; }));
console.log(d3.max(data, function(d) { return d.key; }));
Я новичок в d3 и JavaScript, но я нашел обходной путь, чтобы найти минимальную и максимальную значения трех строк с объектами, используя d3.extent
и .concat
:
y.domain(
d3.extent(
d3.extent(data, function(d) {
return d.line1; })
.concat(d3.extent(data, function(d) {
return d.line2; })
.concat(d3.extent(data, function(d) {
return d.line3; })
))
));