d3.js 不与 Jade 内联渲染

Question

我正在尝试使用 Jade 内联渲染一些 d3.js (javascript)。有没有人尝试做类似的事情/人们是否认为我尝试完成此操作的方式有任何问题？我正在尝试将我的javascript附加到脚本下方的div中，即radial_chart ...

任何帮助将不胜感激！提前致谢。

Jade w/ d3.js

!!! 5
html
  head
    meta(name='viewport', content='user-scalable=no, width=device-width')
    title Simple Radar Chart
    link(href='../css/radialCSS_Mobile.css', rel='stylesheet', type='text/css')
    script(src='http://mbostock.github.com/d3/d3.js?2.5.0')
    script(src='http://code.jquery.com/jquery-1.7.1.min.js')
  style
    .axis line {
    stroke: #222;
    }
    .axis path {
    fill: none;
    stroke: #222;
    }
    .axis + .axis g text {
    display: none;
    }
    #clearfooter {
    height: 200px;
    }
  body
    script
      $(document).ready(function(){

        var svgsrc = !{JSON.stringify(svgsrc)};
          console.log(svgsrc);
          var html = '<a href="#" id="playButton">Play</a>';

      //  html += '<div id="radial_chart">svgsrc</div>';
          document.getElementById("radial_chart").innerHTML = svgsrc;
      canvg();
      });
    script(src='text/javascript')
      height = 600;
      width = 400;
      widthPadding = 2;
      heightPadding = 20;
      var angle = d3.scale.linear()
      .range([0, 2 * Math.PI]);
      angle.domain([0, 3]);
      outerRadius = height / 2 - 100,
      innerRadius = 60;
      var radius = d3.scale.linear()
      .range([0, outerRadius]);
      radius.domain([0, 10]);
      //var svg = document.getElementById("mySVG");
      //var svg = d3.select("#radial_chart");
      var svg = d3.select("#radial_chart").selectAll(".axis");
      var capitalMeta = ["Social", "Focus", "Activity"];
      // create Axis
      svg.selectAll(".axis")
      .data(d3.range(angle.domain()[1]))
      .enter().append("g")
      .attr("class", "axis")
      .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
      .call(d3.svg.axis()
      .scale(radius.copy().range([-13, -outerRadius]))
      .ticks(5)
      .orient("left"))
      .append("text")
      .attr("y",
      function (d) {
      if (window.innerWidth < 455){
      console.log("innerWidth less than 455: ",window.innerWidth);
      return -(window.innerHeight * .33);
      }
      else{
      console.log("innerWidth greater than 455: ",window.innerWidth);
      return -(window.innerHeight * .465);
      }
      })
      .attr("dy", ".71em")
      .attr("text-anchor", "middle")
      .text(function(d, i) { return capitalMeta[i]; })
      .attr("style","font-size:12px;");

    #radial_chart
  script(src='/Users/dereklo/Node/pie/canvg.js')
    canvg();

Answer 1

发布呈现的 html 以查看问题所在通常会有所帮助。在这种情况下，看起来您在脚本标记之外还有一些额外的代码。我想你想在你的body 标签里面。请注意，我不知道代码是否会执行您想要的操作，但至少 html 应该格式正确。

script(src='/Users/dereklo/Node/pie/canvg.js')
script
  $(document).ready(function(){

    var svgsrc = !{JSON.stringify(svgsrc)};
    console.log(svgsrc);
    var html = '<a href="#" id="playButton">Play</a>';

    //  html += '<div id="radial_chart">svgsrc</div>';
    document.getElementById("radial_chart").innerHTML = svgsrc;
    canvg();
  });

  height = 600;
  width = 400;
  widthPadding = 2;
  heightPadding = 20;
  var angle = d3.scale.linear()
  .range([0, 2 * Math.PI]);
  angle.domain([0, 3]);
  outerRadius = height / 2 - 100,
  innerRadius = 60;
  var radius = d3.scale.linear()
  .range([0, outerRadius]);
  radius.domain([0, 10]);
  //var svg = document.getElementById("mySVG");
  //var svg = d3.select("#radial_chart");
  var svg = d3.select("#radial_chart").selectAll(".axis");
  var capitalMeta = ["Social", "Focus", "Activity"];
  // create Axis
  svg.selectAll(".axis")
  .data(d3.range(angle.domain()[1]))
  .enter().append("g")
  .attr("class", "axis")
  .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
  .call(d3.svg.axis()
  .scale(radius.copy().range([-13, -outerRadius]))
  .ticks(5)
  .orient("left"))
  .append("text")
  .attr("y",
  function (d) {
  if (window.innerWidth < 455){
  console.log("innerWidth less than 455: ",window.innerWidth);
  return -(window.innerHeight * .33);
  }
  else{
  console.log("innerWidth greater than 455: ",window.innerWidth);
  return -(window.innerHeight * .465);
  }
  })
  .attr("dy", ".71em")
  .attr("text-anchor", "middle")
  .text(function(d, i) { return capitalMeta[i]; })
  .attr("style","font-size:12px;");