d3.js - d3.js 绘图未显示在 R Shiny 绘图区域内

问题描述

首先，让我接受我是 d3.js 的新手。我相当习惯于 R。我一直在 d3.js 中进行绘图，这要归功于堆栈溢出社区和一些可能的 d3.js 示例。我遇到了 r2d3 作为连接 R 和 d3.js 图的模式，因此使用它来建立连接。

我在 d3.js 中创建了一个绘图，并希望将它与 R Shiny 输出连接起来。我能够将情节连接到 R Shiny。但情节总是从闪亮的情节区域中走出来。

这是我的情节在 R Shiny 区域中的外观：

征求您对以下方面的建议：

如何修复 R Shiny 区域内的 d3.js 图。

我的 Ui.R 代码如下：

column(d3Output("clplot"),width = 12)

我的服务器代码如下：

  output$clplot <-r2d3::renderD3(
r2d3(data = cl_d3(),script="d3/cl_dilip_v1.js", d3_version = "5")

)

附上js代码如下：

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var jsondata = [{ "promotedprice": 100, "nonpromotedprice": 350, "avgprice": 230, "x_value": 80, "brand": "Brand1" }, { "promotedprice": 99, "nonpromotedprice": 170, "avgprice": 130, "x_value": 140, "brand": "Brand2" }, { "promotedprice": 47, "nonpromotedprice": 147, "avgprice": 80, "x_value": 200, "brand": "Brand3" }, { "promotedprice": 100, "nonpromotedprice": 250, "avgprice": 220, "x_value": 260, "brand": "Brand4" }, { "promotedprice": 99, "nonpromotedprice": 170, "avgprice": 130, "x_value": 320, "brand": "Brand5" }];




// Creating the colour Category

var color = d3.scaleOrdinal(d3.schemeCategory10);

// Creating the 1st Comapartment

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 450);

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

// Attach the Promoted Price Rectangle    
var g = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("g")
    .classed('rect', false)
    .on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", .9);
        div.html(formatTime(d.x_value) + "<br/>" + d.nonpromotedprice);
        //.style("left", (d3.event.pageX) + "px")
        //.style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function (d) {
        div.transition()
            .duration(0)
            .style("opacity", 0);
    })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));




var accent = d3.scaleOrdinal(d3.schemeAccent);

// Line for the 1st Block
g.append("line")          // attach a line
    .style("stroke", "#E6EAEE")
    .style("stroke-width", 17)  // colour the line
    .attr("x1", function (d) { return d.x_value; })     // x position of the first end of the line
    .attr("y1", function (d) { return d.nonpromotedprice; })      // y position of the first end of the line
    .attr("x2", function (d) { return d.x_value; })     // x position of the second end of the line
    .attr("y2", function (d) { return d.promotedprice; });


// Promoted Price Rectangle for the 1st Block
g.append("rect")
    .attr("width", 24)
    .attr("height", 13)
    .attr("x", function (d) { return d.x_value - 12; })
    .attr("y", function (d) { return d.promotedprice; })
    .attr("fill", function (d) { return color(d.x_value); })


// Non Promoted Price Rectangle for the 1st Block
g.append("rect")
    .attr("width", 24)
    .attr("height", 13)
    .attr("x", function (d) { return d.x_value - 12; })
    .attr("y", function (d) { return d.nonpromotedprice; })
    .attr("fill", function (d) { return color(d.x_value); })


// Average Price Rectangle for the 1st Block
g.append("rect")
    .attr("width", 24)
    .attr("height", 13)
    .attr("x", function (d) { return d.x_value - 12; })
    .attr("y", function (d) { return d.avgprice; })
    .attr("fill", function (d) { return color(d.x_value); });



// Graph X- Axis and Title Text for 1st svg


var y_scale = d3.scaleLinear()
    //.domain([d3.min(function (d) { return d.promotedprice }), d3.max(function (d) { return d.nonpromotedprice; })])
    .range([370, 0]);

var y_axis = d3.axisLeft()
    .scale(y_scale);

y_scale.domain([0, d3.max(data, function (d) { return d.nonpromotedprice; })]).nice();

g.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0, 40)")
    .attr("fill", "lightgrey")
    .attr("stroke-width", 0.15)
    .attr("stroke-opacity", 0.2)
    //.attr("shape-rendering", crispEdges)
    //stroke-opacity: 0.7;shape-rendering: crispEdges;
    .call(y_axis
        .tickSize(-420)
        .tickFormat(""))
    ;


// PEPSICO AS-IS BRAND CALL OUT
g.append("rect")
    .attr("width", 38)
    .attr("height", 20)
    .attr("x", function (d) { return d.x_value - 2; })
    .attr("y", function (d) { return d.promotedprice; })
    .attr("fill", function (d) { return color(d.x_value); })
    .attr("transform", "translate(" + -15 + "," + -40 + ")");

g.append("text")
    //.classed('rotation', true)


    //.attr('x', (d,i)=> xScale(i))
    .attr("x", function (d) { return d.x_value - 13; })
    .attr("y", function (d) { return d.promotedprice - 28; })
    .attr("dy", ".35em")
    .text(function (d) { return d.brand; })
    .style("font-family", "arial")
    .style("font-size", 8)

    .attr("stroke-width", 0.15)
    .attr("fill", "white");


function dragstarted(d) {
    d3.select(this).raise().classed("active", true);
}

function dragged(d) {

    d3.select(this).select("rect").attr("y", d.y = d3.event.y);

    //.attr("x", d.x = d3.event.x)

}

function dragended(d) 
{
    d3.select(this).classed("active", false);
}

标签： d3.jsshiny

d3.js - d3.js 绘图未显示在 R Shiny 绘图区域内

问题描述

解决方案

推荐阅读