Javascript o这样,问题就可以解决了。谢谢 $(document).ready(function () { //alert("In document ready"); var option = '<option value="0"

Javascript o这样,问题就可以解决了。谢谢 $(document).ready(function () { //alert("In document ready"); var option = '<option value="0",javascript,d3.js,data-visualization,candlestick-chart,Javascript,D3.js,Data Visualization,Candlestick Chart,o这样,问题就可以解决了。谢谢 $(document).ready(function () { //alert("In document ready"); var option = '<option value="0">--select --</option>'; //filling the drop down for company list d3.csv("companies.csv", function (d

o这样,问题就可以解决了。谢谢
$(document).ready(function () {
        //alert("In document ready");
        var option = '<option value="0">--select --</option>';      //filling the drop down for company list
        d3.csv("companies.csv", function (data) {
            //var z = "a.us.txt";
            //console.log(data.z);

            for (var i = 0; i < data.length; i++) {
                //  console.log(data[i].companies);
                option += '<option Value="' + data[i].companies + '">' + data[i].companies + '</option>'
            }

            $('#det').html(option);

        });

        createCandleStickChart();           // Creating candle chart

    })

    var margin, width, height, parseDate, x, y, candlestick, xAxis, yAxis, svg;
    var link = "https://raw.githubusercontent.com/Diksha1206/Stocks-Viz/master/Data/";
    var selectedcompany;


    function createCandleStickChart() {

         margin = { top: 20, right: 20, bottom: 30, left: 50 },     //Setting margin width and height
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

         parseDate = d3.timeParse("%Y-%m-%d");              // Parsing the data as year month and day

        x = techan.scale.financetime()                      // Scaling a axis.Setting x from 0 to width defined 
                .range([0, width]);                         //techan.scale.financetime plots only points available in the data's date domain without linear (weekend, market holiday) gaps.

         y = d3.scaleLinear()                           // Scaling y-axis to Linear timescale
                .range([height, 0]);

         candlestick = techan.plot.candlestick()     //techan.plot.candlestick - construct a candlestick.           
                .xScale(x)                      
                .yScale(y);

         xAxis = d3.axisBottom()                //Creating x-axis
                .scale(x);

         yAxis = d3.axisLeft()              //Creating y axis
                .scale(y);

         svg = d3.select("#candle").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 + ")");

         svg.on("brush", function (value) {

             alert("Clicked in brush");
         })
    }

    $('select[name="Companydropdown"]').change(function () {

        document.getElementById("candle").innerHTML = "";
        selectedcompany = $(this).val();
        var linktogo = link + selectedcompany;
        //alert(linktogo);

        createCandleStickChart();

        d3.csv(linktogo, function (error, data) {           //providing the link of the selected data from the dropdown
            var accessor = candlestick.accessor();
            data = data.slice(0, 200).map(function (d) {
                return {
                    date: parseDate(d.Date),
                    open: +d.Open,
                    high: +d.High,
                    low: +d.Low,
                    close: +d.Close,
                    volume: +d.Volume
                };
            }).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

            //svg.selectAll('.candlestick')
            //.data(data)
            //.enter().append('g')
            //.attr('class', 'candlestick')
            //.on('mouseover', function (d) {
            //    console.log(d);
            //})


            svg.append("g")
                    .attr("class", "candlestick")

            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")");

            svg.append("g")
                    .attr("class", "y axis")
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("Price ($)");
            draw(data.slice(0, data.length - 20));

            d3.select("button").on("click", function () { draw(data); }).style("display", "inline");
        });
    })    
    function draw(data) {
        x.domain(data.map(candlestick.accessor().d));
        y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());          svg.selectAll("g.candlestick").datum(data).append("g").call(candlestick).on('mouseover', function (d) {
            alert("Mouseover");
            console.log("clicking on", d);
        });

        svg.selectAll("g.x.axis").call(xAxis);
        svg.selectAll("g.y.axis").call(yAxis);
    }
var x0 = x.invert(d3.mouse(this)[0]),
  i = bisectDate(data, x0, 1),
  d0 = data[i - 1],
  d1 = data[i],
  d = x0 - d0.date > d1.date - x0 ? d1 : d0;