Question

我一直在使用我在网上找到的假数据和草图来创建一个线图。但是，我无法使用包含数字数据的JSON文件显示路径。这不是最终数据，但我使用了字段＆＃34; Id＆＃34;作为数值。

我应该可以看到对角线，但图中没有显示。

<body>

    <script>


          var margin = {top: 20, right: 30, bottom: 30, left: 50},
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    a = 3.779528*5,
    f = width/height,
    ticksX = 1+ (width/a),
    ticksY = 1+ (height/a*f)
    c = 1 + (width/a*10);


var x = d3.scale.linear()
    .domain([194, 2229])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([194, 2229])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
  .tickSize(-height)
  .tickPadding(10)  
  .tickSubdivide(true) 
  .ticks(ticksX)
    .orient("bottom");  

var yAxis = d3.svg.axis()
    .scale(y)
  .tickPadding(10)
  .tickSize(-width)
  .tickSubdivide(true)
  .ticks(ticksY)  
    .orient("left");


var zoom = d3.behavior.zoom()
    .x(x)
    //.y(y)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);  




                var svg = d3.select("body").append("svg")
  .call(zoom)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");




          d3.json("pacientes.json", function(error, data) {
            data.forEach(function(d) {

            d.Id = +d.Id;
            d.Edad = +d.Edad;
            console.log(d.Id);
            });

                      x.domain(d3.extent(data, function(d) { return d.Id; }));
          y.domain(d3.extent(data, function(d) { return d.Id; }));

                      svg.append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);



            var line = d3.svg.line()
    .interpolate("linear")  
    .x(function(d) { return x(d.Id); })
    .y(function(d) { return y(d.Edad); });  

    svg.selectAll('svg-path')
  .data(data)
  .enter()
    .append("path")
    .attr("x", function(d) { return x(d.Id); })
    .attr("y", function(d) { return x(d.Id); })
    .style("stroke-width", 10)
    .attr("class", "line")
    .attr("clip-path", "url(#clip)")
    .attr('stroke', 'blue')
    .attr("d", line);


          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);


          svg.append("g")
            .attr("class", "y axis")
            .append("text")
            .attr("class", "axis-label")
            .attr("transform", "rotate(-90)")
            .attr("y", (-margin.left) + 10)
            .attr("x", -height/2)
            .text('mV');



          }); // closing line

      function zoomed() {
  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis); 
  svg.selectAll('path.line').attr('d', line);  
  );  
}

    </script>
  </body>

</html>

我非常确信我的错误就在这里

    svg.selectAll('svg-path')
  .data(data)
  .enter()
    .append("path")
    .attr("x", function(d) { return x(d.Id); })
    .attr("y", function(d) { return x(d.Id); })
    .style("stroke-width", 10)
    .attr("class", "line")
    .attr("clip-path", "url(#clip)")
    .attr('stroke', 'blue')
    .attr("d", line);

正确加载数据并正在创建SVG（如图所示）。任何帮助将不胜感激。

我没有添加CSS，但应该是蓝线。

谢谢！ consolelog SVGs

路径没有显示d3（绑定问题？）

0 个答案: