Как можно нарисовать прямоугольник на основе двух дат? - PullRequest
Новая
       3

Как можно нарисовать прямоугольник на основе двух дат?

0 голосов
/ 21 января 2020

Ниже приведен код, который я использую для рисования оси и круга. Мне нужно добавить прямоугольник на основе двух дат и поместить его под круг. Ценю твою помощь. Спасибо.

enter image description here 

                    let scale: any = d3select.scaleTime()
                        //.domain([d3select.min(data), d3select.max(data)])
                        .domain([new Date(2020, 0, 1), new Date(2021, 0, 1)])
                        .range([20, axes_width - 800]);


                    let x_axis: any = d3select.axisBottom(scale)
                        .scale(scale);


                    axes_svg.append("g")
                        .call(x_axis);

                    var myData = [new Date(2020, 3, 1), new Date(2020, 6, 1)];



                    axes_svg
                        .selectAll('circle')
                        .data(myData)
                        .enter()
                        .append('circle')
                        .style("fill", "#69b3a2")
                        .attr('r', 6)
                        .attr('cy', 40)
                        .attr('cx', function (d) {
                            return scale(d);
                        });

1 Ответ

1 голос
/ 21 января 2020

Я думаю, что ваша проблема в том, что вы передаете все даты в одномерном массиве. Вместо того, чтобы иметь

var myData = [new Date(2020, 3, 1), new Date(2020, 6, 1)];

, как вы делаете для кругов, у вас должно быть что-то вроде этого:

var myRecData = [ {"startDate": new Date(2020, 3, 1), "endDate": new Date(2020, 6, 1)}, {"startDate": new Date(2020, 4, 1), "endDate": ....];

И затем доступ это с d.startDate и d.endDate

РЕДАКТИРОВАТЬ:

На основе вашего последнего комментария я воссоздал весь код ( для будущих вопросов, пожалуйста, добавьте полный Воспроизводимый код, поэтому люди, которые хотят помочь вам, могут быстро его протестировать ... ): 

<body>
<div id="mainDiv"></div>
<script>
    const width = 500
    const height = 500

    const axes_svg = d3.select("#mainDiv").append("svg")
      .attr("viewBox", [0,0, width, height])
      .attr("width", "100%")
      .attr("height", "100%")

    let scale = d3.scaleTime()
        //.domain([d3select.min(data), d3select.max(data)])
        .domain([new Date(2020, 0, 1), new Date(2021, 0, 1)])
        .range([20, width - 200]);

    let x_axis = d3.axisBottom(scale)
        .scale(scale);

    axes_svg.append("g")
        .call(x_axis);

    var myData = [new Date(2020, 3, 1), new Date(2020, 6, 1)];

    axes_svg
        .selectAll('circle')
        .data(myData)
        .enter()
        .append('circle')
        .style("fill", "#69b3a2")
        .attr('r', 6)
        .attr('cy', 40)
        .attr('cx', function (d) {
            return scale(d);
        });


    var testdata = [{ start: new Date(2020, 1, 1), close: new Date(2020, 3, 1) }];

    axes_svg
        .data(testdata) 
        .append("rect") 
        .style("fill", "#00abff") 
        .attr("x", function (d) { return scale(d.start); }) 
        .attr("y", 80) //distance from axis 
        .attr("width", function (d) { return scale(d.close) - scale(d.start); }) 
        .attr("height", 30); //height
</script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...