jquery mobile中的d3条形图 - 为什么有两个复选框？

Question

我修改了this d3 barchart，其中包含一个非常好的排序功能，可以在jquery移动页面中进行演示。

我得到了以下可怕的结果，我无法弄明白。 （请忽略同样糟糕的x轴标签和错误定位的标题;我稍后会修复它们。

左上角的复选框有效;你检查它和酒吧排序。但它邪恶的分身出现在中心。单击图表区域内的复选框，复选标记显示在两个复选框中，但没有任何反应。

我迷惑了。

这里是相关的html：

<div data-role='content' class='chart-here'>

  <input type='checkbox' name='checkbox-2a' id='checkbox-2a' />
  <label for='checkbox-2a' data-corners='true' data-shadow='false' data-iconshadow='true' data-wrapperels='span' data-icon='checkbox-on' data-theme='c' data-mini='false' class='chart1 ui-checkbox-on ui-btn ui-btn-hover-c ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c'>
    <span class='ui-btn-inner'>
            <span class='ui-btn-text'>Sort cereal by type</span>
    <span class='ui-icon ui-icon-checkbox-on ui-icon-shadow'>&nbsp;</span>
    </span>
  </label>

......以及我认为相关的d3.js：

  d3.select('#checkbox-2a').on('change', change);

  var sortTimeout = setTimeout(function() {
    d3.select('#checkbox-2a').property('checked', false).each(change);
  }, 1000);

  function change() {
    clearTimeout(sortTimeout);

...以及相关的CSS，没有它，复选框会出现在图表上方（我想要的地方），但根本不起作用：

label.chart1 {
  position: absolute;
  top: 120px;
  left: 300px;
}

任何人都知道发生了什么？

Answer 1

尝试设置您的jQM页面：

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>Header</h1> 
    </div>  
    <div role="main" class="ui-content">
      <form>
          <label>
              <input type="checkbox" name="checkbox-2a" id="checkbox-2a">Sort cereal by type
          </label>
      </form>
      <div class="chart-here"></div>    
    </div> 
</div>  

然后使用class="chart-here"

将您的SVG附加到DIV

更新：这是脚本

$("#checkbox-2a").on("change", function(e){
  change(e);
});

  var sortTimeout = setTimeout(function() {
    $("#checkbox-2a").prop( "checked", true ).checkboxradio( "refresh" ).change();
  }, 1000);

  function change() {
    clearTimeout(sortTimeout);
    var IsChecked = $("#checkbox-2a").is(":checked");
    // Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(IsChecked
        ? function(a, b) { return b.frequency - a.frequency; }
        : function(a, b) { return d3.ascending(a.letter, b.letter); })
        .map(function(d) { return d.letter; }))
        .copy();