d3.select работает на теле, но не на id.Что мне не хватает? - PullRequest
0 голосов
/ 24 мая 2019

Я пытаюсь сделать простую линейную диаграмму с d3.js, React и PatternFly 4. Я сделал другие графики, которые работают так, как задумано, с выбранным идентификатором, но этот отказывается работать, и я не могу поставить свойпальцем по вопросу.

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

render() {

### This only works if I replace "#linechart" by "body"
var svg = d3.select("#linechart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", valueline);

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

svg.append("g")
        .call(d3.axisLeft(y));
return ( 
   <div id={"#" + this.props.id}></div>
);

Сейчас я совершенно нуб в d3.js, этокод в значительной степени является копией из примера в Интернете с несколькими настройками.

1 Ответ

0 голосов
/ 11 июня 2019

У меня была такая же проблема. Я получил это, поместив весь код для svg в функцию, затем я вызвал его в componentDidMount ()

...