Question

我正在使用d3.js进行描述性数据可视化。我想创建一个模板并根据json数据文件添加信息。

模板读取json文件，考虑个人资料图片，描述和一些数字。

为了重新使用模板，我创建了一个包含不同选项的select标签。我使用circles和modals完成了这种方法。但是，event是click方法，而不是change方法。

我尝试使用前面的例子对此进行编码。

这是我使用的代码：

HTML

<select id='opts' class='perfiles form-control'></select>
<div id="perfil"></div>

JS

导出功能

const graph_container = (w, h) => {
let content = d3.select('#perfil')
let jsondata = 'assets/profiles.json'

let test = (vals) => {
  return `
    <p>${vals.nombre}</p>
  `
}

阅读Json数据

d3.json(jsondata, (err, data) => {
  if (err) {
    throw err
  }

向选择器添加选项

let selector = d3.select('.perfiles')
  .selectAll('option')
  .data(data.features)
  .enter()
  .append('option')
  .property('value', (d) => {
    return d.image_id
  })
  .text((d) => {
    return d.nombre
  })

尝试根据选项更改创建段落。

let change = d3.select('#opts')
  .data(data.features)
  .enter()
  .on('change', '#opts', (d) => {
    content.html(test(d))
  })

test变量是我想要创建的模板。

在其他示例中，我使用了JQuery：

$('#opts').change(function() {
  // Read and do something
}

但我想知道如何通过我的示例实现这一目标：将.on('change', (d)与d3一起使用。这可能吗？我怎样才能做到这一点？

Answer 1

在下拉菜单中，您使用this.value获取所选选项的值，而不是d，它指的是绑定数据。

selection.on("change", function(){
    var selected = this.value;
    //selected contains the selected option
})

这是一个简单的演示：

＆＃13;

var data = ["foo", "bar", "baz"];
var body = d3.select("body");
var div = d3.select("#myDiv")
var sel = body.append("select");
var opts = sel.selectAll(null)
  .data(data)
  .enter()
  .append("option")
  .attr("value", function(d) {
    return d
  })
  .text(function(d) {
    return d
  });
  
div.html("The selected option is: " + d3.select("select").node().value)

sel.on("change", function(d) {
  div.html("The selected option is: " + this.value)
})

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="myDiv"></div>

＆＃13;

如何使用d3.js在select标签中更改选项时创建段落？

1 个答案: