代码在 jsfiddle 上运行良好，但在本地主机上不起作用答案

【问题标题】：Code works fine on jsfiddle but doesn´t work on local host代码在 jsfiddle 上运行良好，但在本地主机上不起作用
【发布时间】：2016-11-19 20:27:21
【问题描述】：

我一直在调整我找到的一些 jsfiddle 文件，以便结果符合我的需要。碰巧的是，我的代码在 jsfiddle 上运行良好，但在我的 localhost 上不起作用（使用 python 启动 HTTPServer）。更具体地说，HTML 文件仅获取 div 中的数字 100。我只是将文件复制到我的计算机上，我需要添加/更改更多内容吗？我是编码新手，感谢任何帮助。

jsfiddle 的链接： https://jsfiddle.net/sgfcusk4/

HTML 文件：

<div id="tooltip" class="hidden">
  <p><span id="value">100</span>
  </p>
</div>

JavaScript 文件：

var margins = {
    top: 12,
    left: 55,
    right: 24,
    bottom: 24
  },
  legendPanel = {
    width: 180
  },
  width = 500 - margins.left - margins.right - legendPanel.width,
  height = 100 - margins.top - margins.bottom,
  dataset = [{
    data: [{
      month: 'Portugal',
      count: 60
    }, {
      month: 'Espanha',
      count: 40
    }],
    name: 'Diesel'
  }, {
    data: [{
      month: 'Portugal',
      count: 35
    }, {
      month: 'Espanha',
      count: 50
    }],
    name: 'Petrol'
  }, {
    data: [{
      month: 'Portugal',
      count: 5
    }, {
      month: 'Espanha',
      count: 10
    }],
    name: 'Alternative'
  }],
  series = dataset.map(function(d) {
    return d.name;
  }),
  dataset = dataset.map(function(d) {
    return d.data.map(function(o, i) {
      // Structure it so that your numeric
      // axis (the stacked amount) is y
      return {
        y: o.count,
        x: o.month
      };
    });
  }),
  stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function(group) {
    return group.map(function(d) {
      // Invert the x and y values, and y0 becomes x0
      return {
        x: d.y,
        y: d.x,
        x0: d.y0
      };
    });
  }),
  svg = d3.select('body')
  .append('svg')
  .attr('width', width + margins.left + margins.right + legendPanel.width)
  .attr('height', height + margins.top + margins.bottom)
  .append('g')
  .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
  xMax = d3.max(dataset, function(group) {
    return d3.max(group, function(d) {
      return d.x + d.x0;
    });
  }),
  xScale = d3.scale.linear()
  .domain([0, xMax])
  .range([0, width]),
  months = dataset[0].map(function(d) {
    return d.y;
  }),
  _ = console.log(months),
  yScale = d3.scale.ordinal()
  .domain(months)
  .rangeRoundBands([0, height], .1),
  xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom'),
  yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left'),
  colours = d3.scale.category10(),
  groups = svg.selectAll('g')
  .data(dataset)
  .enter()
  .append('g')
  .style('fill', function(d, i) {
    return colours(i);
  }),
  rects = groups.selectAll('rect')
  .data(function(d) {
    return d;
  })
  .enter()
  .append('rect')
  .attr('x', function(d) {
    return xScale(d.x0);
  })
  .attr('y', function(d, i) {
    return yScale(d.y);
  })
  .attr('height', function(d) {
    return yScale.rangeBand();
  })
  .attr('width', function(d) {
    return xScale(d.x);
  })
  .on('mouseover', function(d) {
    var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

    d3.select('#tooltip')
      .style('left', xPos + 'px')
      .style('top', yPos + 'px')
      .select('#value')
      .text(d.x);

    d3.select('#tooltip').classed('hidden', false);
  })
  .on('mouseout', function() {
    d3.select('#tooltip').classed('hidden', true);
  })

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

svg.append('g')
  .attr('class', 'axis')
  .call(yAxis);
/* Rectangulo amarelo a volta dos tipos de combustivel
svg.append('rect')
    .attr('fill', 'yellow')
    .attr('width', 160)
    .attr('height', 30 * dataset.length)
    .attr('x', width + margins.left)
    .attr('y', 0);
*/

//Texto do lado direito
series.forEach(function(s, i) {
  svg.append('text')
    .attr('fill', 'black')
    .attr('x', width + margins.left + 8)
    .attr('y', i * 24 + 24)
    .text(s);

  //Barras do lado direito       
  svg.append('rect')
    .attr('fill', colours(i))
    .attr('width', 60)
    .attr('height', 20)
    .attr('x', width + margins.left + 90)
    .attr('y', i * 24 + 6);
});

还有css文件：

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

#tooltip {
  position: absolute;
  text-align: center;
  width: 40px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 20px;
}

我唯一做的就是将文件的内容复制到我计算机上的新文件中，并命名为“sketch.html”、“sketch.css”和“sketch.js”。

当我在 localhost 上打开 HTML 时，我看到的唯一内容是数字“100”。它不显示任何错误消息。

请帮忙。

【问题讨论】：

也许如果您发布用于导入 css 和 javascript 的整个 html 文件，那么人们将能够看到您做错了什么。您似乎在执行或
你注意到fiddle包含D3.js了吗？您必须自己下载 D3 并在本地代码中引用它，因为对 D3.js 的引用在 JSFiddle 上不可见。

标签： javascript html css d3.js

【解决方案1】：

您需要在 html 文件中包含 css 和 javascript 文件。

css 属于link 元素：<link rel="stylesheet" href="sketch.css" />

和 js 中的 script 标签：<script src="sketch.js"></script>

基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart</title>
    <link rel="stylesheet" href="sketch.css" />
</head>
<body>
    <div id="tooltip" class="hidden">
        <p><span id="value">100</span></p>
    </div>
    <script src="sketch.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

在 HTML 文件的头部添加 <link href="sketch.css" type="stylesheet"> 并在结束正文标记之前添加 <script src="sketch.js"></script>

【讨论】：

【解决方案3】：

仅复制内容会忽略将 HTML 连接到 JS 和 CSS。你需要告诉它包含这些文件，它不会发生。

在 HTML 的 <head> 部分中链接到您的 css，如下所示（假设所有文件都在同一个文件夹中）：

<link rel="stylesheet" href="sketch.css">

并在 HTML 文件的末尾添加：

<script type="text/javascript" src="sketch.js"></script>

【讨论】：