Как визуализировать элемент svg из d3.js с помощью response.js?

Я пытаюсь сделать график, используя response.js. В котором я пытаюсь использовать простой метод ReactDOM.render() на странице html. когда я добавляю этот графический контент в тело, он будет работать для меня хорошо, но я хочу сделать это с помощью response.js.Как визуализировать элемент svg из d3.js с помощью response.js?

программа-код:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!--react js url here --> 
</head> 
<body> 
<script> 
var csv_data = "date,bucket,count\n19:37:1 164,30000,12\n19:37:1 283,30000,8\n19:37:1 349,80000,2\n19:37:1 421,30000,16\n19:37:1 599,30000,2\n19:37:1 608,40000,4\n19:37:1 755,30000,4\n19:37:1 857,30000,2\n19:37:1 915,40000,6"; 
var margin = { 
     top : 20, 
     right : 90, 
     bottom : 30, 
     left : 50 
    }, width = 960 - margin.left - margin.right, height = 500 - margin.top 
      - margin.bottom; 

var svg = d3.select("#svg").attr("width", 
      width + margin.left + margin.right).attr("height", 
      height + margin.top + margin.bottom).append("g").attr(
      "transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 
var buckets = d3.csv.parse(csv_data); 

    buckets.forEach(function(d) { 
     d.date = new Date(timeFormat.parse(d.date)); 
     d.bucket = +d.bucket; 
     d.count = +d.count; 
    }); 

    x.domain(d3.extent(buckets, function(d) { 
     return d.date; 
    })); 

    y.domain(d3.extent(buckets, function(d) { 
     return d.bucket; 
    })); 

    z.domain([ 0, d3.max(buckets, function(d) { 
     return d.count; 
    }) ]); 
x.domain([ x.domain()[0], +x.domain()[1] + xStep ]); 
    y.domain([ y.domain()[0], y.domain()[1] + yStep ]); 

    // Display the tiles for each non-zero bucket. 
    svg.selectAll(".tile").data(buckets).enter().append("rect").attr(
      "class", "tile").attr("x", function(d) { 
     return x(d.date); 
    }).attr("y", function(d) { 
     return y(d.bucket + yStep); 
    }).attr("width", x(xStep) - x(0)).attr("height", y(0) - y(yStep)) 
      .style("fill", function(d) { 
       return z(d.count); 
      }); 

    // Add a legend for the color values. 
    var legend = svg.selectAll(".legend").data(
      z.ticks(6).slice(1).reverse()).enter().append("g").attr(
      "class", "legend").attr("transform", function(d, i) { 
     return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; 
    }); 

    legend.append("rect").attr("width", 20).attr("height", 20).style(
      "fill", z); 

    legend.append("text").attr("x", 26).attr("y", 10).attr("dy", ".35em") 
      .text(String); 

    svg.append("text").attr("class", "label").attr("x", width + 20).attr(
      "y", 10).attr("dy", ".35em").text("Count"); 

    // Add an x-axis with label. 
    svg.append("g").attr("class", "x axis").attr("transform", 
      "translate(0," + height + ")").call(xAxis).append("text").attr(
      "class", "label").attr("x", width).attr("y", -6).attr(
      "text-anchor", "end").text("Time"); 

    // Add a y-axis with label. 
    svg.append("g").attr("class", "y axis").call(yAxis).append("text") 
      .attr("class", "label").attr("y", 6).attr("dy", ".71em").attr(
        "text-anchor", "end").attr("transform", "rotate(-90)") 
      .text("Latency"); 
</script> 
<div id="container"></div> 
<script type="text/jsx"> 
    ReactDOM.render(<svg id="svg"></svg>,document.getElementById('container'));  
</script> 
</body> 
</html>

Но график не отображается в браузере, когда я запрос на эту страницу. что мне здесь не хватает?

источник

2016-08-25 kit

Посмотрите на [это] (https://www.smashingmagazine.com/2015/12/generating-svg-with-react/) – Igorsvee

@Gerardo Furtado- да право. исправил эту ошибку. Другим способом я могу сделать эту переменную svg самостоятельно, выбрав div или что-то в этом роде? – kit

Я не уверен, понимаю ли я ваш вопрос ... Вы имеете в виду, можете ли вы выбрать div для визуализации SVG внутри него? –

Если «SVG» не является идентификатором существующих Г в странице, мне кажется, что вы забыли добавить в SVG в переменной svg:

var svg = d3.select("#svg") 
    .append("svg")//this appends the SVG 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

источник

2016-08-25 11:51:14

да. исправил эту ошибку, все еще сталкиваясь с тем же вопросом, что график не отображается в rendered svg. – kit

Поскольку код d3 выполняются до Код react, элемент svg еще не существует. Вы можете создать класс реакции, который отображает элемент svg, а затем поместите свой код d3 componentDidMount и/или componentDidUpdate. Реагировать делает все, что в тени DOM, прежде чем добавить его к реальному DOM, так что вам нужно, чтобы убедиться, что элемент доступен, прежде чем вы можете выбрать его с d3 (или JQuery и т.д.)

class MySVG extends React.Component { 

    componentDidMount() { 
    var svg = d3.select('#my-svg'); 
    //Do svg stuff 
    } 

    render() { 
    return (
     <svg id="my-svg"></svg> 
    ); 
    } 

} 

export default MySVG;

, а затем делают mySVG с ReactDOM.render()

источник

2017-07-10 13:16:45 ViggoV

Обратите внимание, что это синтаксис ES6. Я не совсем уверен, как это будет выглядеть в ванильном javascript .. – ViggoV

Как визуализировать элемент svg из d3.js с помощью response.js?

ответ

Смежные вопросы