[enter code here][1]
Я извлек данные из Elasticsearch и отобразил их на гистограмме с помощью D3.js, но проблема здесь в том, что мне нужно отфильтровать их.Например, если у меня есть некоторый sessionID по оси Y и байты по оси X и в раскрывающемся списке, у меня есть имена пользователей.
Если я выбираю одного конкретного пользователя, соответствующие данные конкретного пользователя должны отображаться на графике, но я получаю все соответствующие данные всех пользователей на гистограмме
Мои данные JSON в ElasticSearch: (образец)
{
"took":1,
"timed_out":false,
"_shards":{
"total":2,
"successful":2,
"skipped":0,
"failed":0
},
"hits":{
"total":14,
"max_score":1.0,
"hits":[{
"_index":"common_log_mapped",
"_type":"doc_type",
"_id":"1569219826987",
"_score":1.0,
"_source":{
"id":"1569219826987",
"user":"Vaish",
"sessionID":"113011",
"bytes":95,
},
{
"_index":"common_log_mapped",
"_type":"doc_type",
"_id":"1569219107755",
"_score":1.0,
"_source":{
"id":"1569219107755",
"user":"user Jags",
"sessionID":"113003",
"bytes":96,
}
]
}
}
var selector = d3
.select("#drop")
.append("select")
.attr("id", "dropdown")
.on("change", function(d) {
selection = document.getElementById("dropdown");
y.domain([
0,
d3.max(data, function(d) {
return d.bytes;
})
]);
yAxis.scale(y);
d3.selectAll(".rectangle")
.transition()
.attr("height", function(d) {
// return height - y(+d[bytes.key]);
return height - y(d.bytes);
})
.attr("x", function(d, i) {
return (width / data.length) * i;
})
.attr("y", function(d) {
// return y(+d[bytes.value]);
return y(d.bytes);
})
.ease("linear")
.select("title")
.text(function(d) {
return d.bytes ;
});
d3.selectAll("g.y.axis")
.transition()
.call(yAxis);
});
selector
.selectAll("option")
.data(allGroup)
.enter()
.append("option")
.attr("value", function(d) {
// return d;
})
.text(function(d) {
return d;
});
Ожидаемый результат: Если я выберу одного конкретного пользователя, я получу соответствующий график. Фактический результат: Получение всей панели для всех данных пользователя
Добавлена ссылка на скрипку: