SVG ничего не показывает в браузере - PullRequest
Новая
       5

SVG ничего не показывает в браузере

0 голосов
/ 27 апреля 2018

Привет, я только начал изучать js, и у меня возникли некоторые проблемы. Мой следующий код ничего не показывает, я пытаюсь создать барплот здесь из файла CSV, код работает нормально, библиотека начальной загрузки также работает правильно Однако, когда я запускаю его, только часть svg не видна, я использую сервер tomcat 8.0 в Eclipse IDE, любая помощь очень ценится. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type = "text/javascript" src="d3/d3.v2.js"></script>
<script type = "text/javascript" src="d3/d3.v3.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Clinical Data Analysis</h1>
<p>Global Performance</p> 
</div>
<svg class="chart" width="40" height="40"></svg>
<p>Global Performance</p> 
<script>


var svg = d3.select("svg"),
    margin = 200,
    width = svg.attr("width") - margin,
    height = svg.attr("height") - margin;


var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
    yScale = d3.scaleLinear().range ([height, 0]);

var g = svg.append("g")
           .attr("transform", "translate(" + 100 + "," + 100 + ")");

d3.csv("XYZ.csv", function(error, data) {
    if (error) {
        throw error;
    }

    xScale.domain(data.map(function(d) { return d.year; }));
    yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

    g.append("g")
     .attr("transform", "translate(0," + height + ")")
     .call(d3.axisBottom(xScale));

    g.append("g")
     .call(d3.axisLeft(yScale).tickFormat(function(d){
         return "$" + d;
     }).ticks(10))
     .append("text")
     .attr("y", 6)
     .attr("dy", "0.71em")
     .attr("text-anchor", "end")
     .text("value");
});
</script>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
</svg> 
</body>
</html>

Код работает, но гистограмма не отображается

1 Ответ

0 голосов
/ 27 апреля 2018

Есть две проблемы: одна - вы используете версию d3, которая не соответствует вашему коду, и две - ваши измерения должны быть изменены.

Первая проблема заключается в том, что вы используете старую версию (версии) d3: 

<script type = "text/javascript" src="d3/d3.v2.js"></script>
<script type = "text/javascript" src="d3/d3.v3.min.js"></script>

Но используя пространство имен d3v4: 

yScale = d3.scaleLinear().range ([height, 0]);

например, D3v3 использует d3.scale.linear ()

Поскольку весы в d3v3 являются всеми свойствами d3.scale, нет свойства или функции библиотеки d3, расположенной в d3.scaleBand или d3.scaleLinear, и, следовательно, вы видите ошибку, которую получаете. D3v4 изменил этот шаблон дизайна.

Итак, давайте используем d3v4, который решает первую проблему.

Во-вторых, ваши размеры должны быть изменены. У вас есть SVG 40x40: 

<svg class="chart" width="40" height="40"></svg>

Но у вас есть запас 200 (или 100 с каждой стороны), естественно, внутри видимой части svg ничего не появляется. Вы фактически указываете отрицательную высоту и ширину здесь: 

width = svg.attr("width") - margin,    // width = 40 - 200
height = svg.attr("height") - margin;  // height = 40 - 200

Вместо этого мы можем увеличить svg до 500 500 (например) и установить для поля более разумное значение, например 40 пикселей, тогда мы должны увидеть ваши оси, как и ожидалось: 

var svg = d3.select("svg"),
    margin = 40,
    width = svg.attr("width") - margin*2,
    height = svg.attr("height") - margin*2;

var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
    yScale = d3.scaleLinear().range ([height, 0]);

var g = svg.append("g")
           .attr("transform", "translate(" + margin + "," + margin + ")");


var data = [
	{year: 2000, value: 100},
	{year: 2001, value: 200},
	{year: 2002, value: 300},
	{year: 2003, value: 400},
	{year: 2004, value: 200},
	{year: 2005, value: 100},
];

    xScale.domain(data.map(function(d) { return d.year; }));
    yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

    g.append("g")
     .attr("transform", "translate(0," + (height) + ")")
     .call(d3.axisBottom(xScale));

    g.append("g")
     .call(d3.axisLeft(yScale).tickFormat(function(d){
         return "$" + d;
     }).ticks(10))
     .append("text")
     .attr("y", 6)
     .attr("dy", "0.71em")
     .attr("text-anchor", "end")
     .text("value");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<h1>Clinical Data Analysis</h1>
<p>Global Performance</p> 
</div>
<svg class="chart" width="500" height="500"></svg>
<p>Global Performance</p>

А вот bl.ock демонстрирует это.

Я добавил несколько фиктивных данных, которые я встроил напрямую. Я также не добавил строку, так как вы не включили код для этого, так что это просто оси

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...