d3js-自定义带状时间轴栏

Question

我正在尝试创建一个自定义的时间轴条形栏-onclick将控制世界地图。尽管当前的模拟无法渲染？

https://jsfiddle.net/q6vu27w3/

var $this = $(".timelinechart");


    var data = [ {
      "label": "Character Design"
    }, {
      "label": "Sketching"
    }, {
      "label": "Story Boarding"
    }, {
      "label": "Drawing"
    }, {
      "label": "Painting"
    }];


    var svg = d3.select( $this[0])
    var barrectsholder = svg.append("g")


    var bar = barrectsholder.selectAll("rect")
      .data(data);

    bar.enter()
      .append("rect")
      .style("fill", "red")
      .attr("x", function(d, i) {
        return 5 * i;
      })
      .attr("y", 0)
      .attr("width", 2)
      .attr("height", 10);